/* =============================================
   SHAILSTACK CSS — v3.1 (Single File)
   https://cdn.shailstack.com/shailstack.css

   SECTIONS:
   1.  Design Tokens
   2.  Dark Mode
   3.  Base Reset
   4.  Container
   5.  Display
   6.  Flexbox
   7.  Grid
   8.  Spacing (Padding + Margin)
   9.  Typography
   10. Colors
   11. Width & Height
   12. Borders
   13. Border Radius
   14. Shadow
   15. Position & Z-Index
   16. Overflow & Opacity
   17. Cursor & Interaction
   18. Accessibility
   19. Transitions & Transforms
   20. Animations
   21. Responsive Prefixes
   22. Print
   --- COMPONENTS ---
   23. Button
   24. Card
   25. Badge
   26. Alert
   27. Form Elements
   28. Avatar
   29. Divider
   30. Skeleton Loader
   31. Tooltip
   32. Progress Bar
   33. Table
   34. Code Block
   35. Section Helper
   36. Navbar
   37. Modal
   38. Dropdown
   39. Tabs
   40. Accordion
   41. Toast
   42. Chip / Tag
   43. Stepper
   44. Stat Card
   45. Spinner
   46. Hero Helper
   ============================================= */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  --ss-primary:          #FF1654;
  --ss-primary-dark:     #CC0F40;
  --ss-primary-light:    #ffe4ec;
  --ss-primary-rgb:      255, 22, 84;

  --ss-success:          #22c55e;
  --ss-success-light:    #dcfce7;
  --ss-success-dark:     #15803d;
  --ss-warning:          #f59e0b;
  --ss-warning-light:    #fef9c3;
  --ss-warning-dark:     #92400e;
  --ss-danger:           #ef4444;
  --ss-danger-light:     #fee2e2;
  --ss-danger-dark:      #991b1b;
  --ss-info:             #3b82f6;
  --ss-info-light:       #dbeafe;
  --ss-info-dark:        #1e40af;

  --ss-white:            #ffffff;
  --ss-black:            #000000;
  --ss-gray-50:          #f9fafb;
  --ss-gray-100:         #f3f4f6;
  --ss-gray-200:         #e5e7eb;
  --ss-gray-300:         #d1d5db;
  --ss-gray-400:         #9ca3af;
  --ss-gray-500:         #6b7280;
  --ss-gray-600:         #4b5563;
  --ss-gray-700:         #374151;
  --ss-gray-800:         #1f2937;
  --ss-gray-900:         #111827;

  --ss-space-0:   0px;
  --ss-space-1:   4px;
  --ss-space-2:   8px;
  --ss-space-3:   12px;
  --ss-space-4:   16px;
  --ss-space-5:   20px;
  --ss-space-6:   24px;
  --ss-space-7:   28px;
  --ss-space-8:   32px;
  --ss-space-10:  40px;
  --ss-space-12:  48px;
  --ss-space-14:  56px;
  --ss-space-16:  64px;
  --ss-space-20:  80px;
  --ss-space-24:  96px;

  --ss-font:       'Roboto', system-ui, -apple-system, sans-serif;
  --ss-font-mono:  'Courier New', 'Consolas', monospace;
  --ss-font-serif: Georgia, 'Times New Roman', serif;

  --ss-text-2xs:  10px;
  --ss-text-xs:   11px;
  --ss-text-sm:   12px;
  --ss-text-base: 14px;
  --ss-text-md:   16px;
  --ss-text-lg:   18px;
  --ss-text-xl:   20px;
  --ss-text-2xl:  24px;
  --ss-text-3xl:  30px;
  --ss-text-4xl:  36px;
  --ss-text-5xl:  48px;
  --ss-text-6xl:  60px;

  --ss-radius-sm:   4px;
  --ss-radius-md:   8px;
  --ss-radius-lg:   12px;
  --ss-radius-xl:   16px;
  --ss-radius-2xl:  24px;
  --ss-radius-3xl:  32px;
  --ss-radius-full: 9999px;

  --ss-shadow-xs:    0 1px 2px rgba(0,0,0,.06);
  --ss-shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --ss-shadow-md:    0 4px 12px rgba(0,0,0,.10);
  --ss-shadow-lg:    0 10px 30px rgba(0,0,0,.12);
  --ss-shadow-xl:    0 20px 50px rgba(0,0,0,.15);
  --ss-shadow-inner: inset 0 2px 4px rgba(0,0,0,.06);

  --ss-ease:          cubic-bezier(.4,0,.2,1);
  --ss-ease-in:       cubic-bezier(.4,0,1,1);
  --ss-ease-out:      cubic-bezier(0,0,.2,1);
  --ss-duration-75:   75ms;
  --ss-duration-100:  100ms;
  --ss-duration-150:  150ms;
  --ss-duration-200:  200ms;
  --ss-duration-300:  300ms;
  --ss-duration-500:  500ms;
  --ss-transition:    all var(--ss-duration-200) var(--ss-ease);

  --ss-border-color:  var(--ss-gray-200);
  --ss-border:        1px solid var(--ss-border-color);

  --ss-z-0:        0;
  --ss-z-10:       10;
  --ss-z-20:       20;
  --ss-z-30:       30;
  --ss-z-50:       50;
  --ss-z-dropdown: 1000;
  --ss-z-sticky:   1020;
  --ss-z-modal:    1050;
  --ss-z-toast:    1080;
  --ss-z-tooltip:  1090;
}

/* ─────────────────────────────────────────────
   2. DARK MODE
   Toggle: data-ss-theme="dark" on <html>
   or:     class="ss-dark" on any element
   Auto:   respects prefers-color-scheme
───────────────────────────────────────────── */
[data-ss-theme="dark"], .ss-dark {
  --ss-white:         #1f2937;
  --ss-black:         #f9fafb;
  --ss-gray-50:       #111827;
  --ss-gray-100:      #1f2937;
  --ss-gray-200:      #374151;
  --ss-gray-300:      #4b5563;
  --ss-gray-400:      #6b7280;
  --ss-gray-500:      #9ca3af;
  --ss-gray-600:      #d1d5db;
  --ss-gray-700:      #e5e7eb;
  --ss-gray-800:      #f3f4f6;
  --ss-gray-900:      #f9fafb;
  --ss-border-color:  #374151;
  --ss-shadow-sm:     0 1px 3px rgba(0,0,0,.3);
  --ss-shadow-md:     0 4px 12px rgba(0,0,0,.4);
  --ss-shadow-lg:     0 10px 30px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ss-theme="light"]) {
    --ss-white:        #1f2937;
    --ss-black:        #f9fafb;
    --ss-gray-50:      #111827;
    --ss-gray-100:     #1f2937;
    --ss-gray-200:     #374151;
    --ss-gray-300:     #4b5563;
    --ss-gray-400:     #6b7280;
    --ss-gray-500:     #9ca3af;
    --ss-gray-600:     #d1d5db;
    --ss-gray-700:     #e5e7eb;
    --ss-gray-800:     #f3f4f6;
    --ss-gray-900:     #f9fafb;
    --ss-border-color: #374151;
  }
}

/* ─────────────────────────────────────────────
   3. BASE RESET
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-y: scroll; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ss-font);
  font-size: var(--ss-text-md);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ss-gray-900);
  background-color: var(--ss-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ss-primary); text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--ss-primary); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
p  { margin: 0; line-height: 1.7; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; margin: 0; }
h1 { font-size: var(--ss-text-4xl); }
h2 { font-size: var(--ss-text-3xl); }
h3 { font-size: var(--ss-text-2xl); }
h4 { font-size: var(--ss-text-xl); }
h5 { font-size: var(--ss-text-lg); }
h6 { font-size: var(--ss-text-md); }
ul, ol { list-style: none; padding: 0; }
button { cursor: pointer; font-family: var(--ss-font); border: none; background: none; }
input, textarea, select { font-family: var(--ss-font); font-size: var(--ss-text-md); }
table { border-collapse: collapse; width: 100%; }
code {
  font-family: var(--ss-font-mono);
  font-size: .875em;
  color: var(--ss-primary-dark);
  background: var(--ss-primary-light);
  padding: 2px 6px;
  border-radius: var(--ss-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────
   4. CONTAINER
───────────────────────────────────────────── */
.ss-container    { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--ss-space-4); }
.ss-container-xs { max-width: 480px;  margin-inline: auto; padding-inline: var(--ss-space-4); }
.ss-container-sm { max-width: 640px;  margin-inline: auto; padding-inline: var(--ss-space-4); }
.ss-container-md { max-width: 768px;  margin-inline: auto; padding-inline: var(--ss-space-4); }
.ss-container-lg { max-width: 1024px; margin-inline: auto; padding-inline: var(--ss-space-4); }
.ss-container-xl { max-width: 1280px; margin-inline: auto; padding-inline: var(--ss-space-4); }

/* ─────────────────────────────────────────────
   5. DISPLAY
───────────────────────────────────────────── */
.ss-block        { display: block; }
.ss-inline       { display: inline; }
.ss-inline-block { display: inline-block; }
.ss-flex         { display: flex; }
.ss-inline-flex  { display: inline-flex; }
.ss-grid         { display: grid; }
.ss-inline-grid  { display: inline-grid; }
.ss-contents     { display: contents; }
.ss-hidden       { display: none !important; }
.ss-invisible    { visibility: hidden; }
.ss-visible      { visibility: visible; }

/* ─────────────────────────────────────────────
   6. FLEXBOX
───────────────────────────────────────────── */
.ss-flex-row      { flex-direction: row; }
.ss-flex-col      { flex-direction: column; }
.ss-flex-row-rev  { flex-direction: row-reverse; }
.ss-flex-col-rev  { flex-direction: column-reverse; }
.ss-flex-wrap     { flex-wrap: wrap; }
.ss-flex-nowrap   { flex-wrap: nowrap; }
.ss-flex-1        { flex: 1 1 0%; }
.ss-flex-auto     { flex: 1 1 auto; }
.ss-flex-none     { flex: none; }
.ss-flex-shrink-0 { flex-shrink: 0; }
.ss-flex-grow     { flex-grow: 1; }

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

.ss-items-start    { align-items: flex-start; }
.ss-items-end      { align-items: flex-end; }
.ss-items-center   { align-items: center; }
.ss-items-baseline { align-items: baseline; }
.ss-items-stretch  { align-items: stretch; }

.ss-self-start  { align-self: flex-start; }
.ss-self-end    { align-self: flex-end; }
.ss-self-center { align-self: center; }
.ss-self-auto   { align-self: auto; }

.ss-order-first { order: -1; }
.ss-order-last  { order: 999; }
.ss-order-1     { order: 1; }
.ss-order-2     { order: 2; }
.ss-order-3     { order: 3; }

.ss-gap-0  { gap: 0; }
.ss-gap-1  { gap: var(--ss-space-1); }
.ss-gap-2  { gap: var(--ss-space-2); }
.ss-gap-3  { gap: var(--ss-space-3); }
.ss-gap-4  { gap: var(--ss-space-4); }
.ss-gap-5  { gap: var(--ss-space-5); }
.ss-gap-6  { gap: var(--ss-space-6); }
.ss-gap-8  { gap: var(--ss-space-8); }
.ss-gap-10 { gap: var(--ss-space-10); }
.ss-gap-12 { gap: var(--ss-space-12); }
.ss-gap-x-2  { column-gap: var(--ss-space-2); }
.ss-gap-x-4  { column-gap: var(--ss-space-4); }
.ss-gap-x-6  { column-gap: var(--ss-space-6); }
.ss-gap-y-2  { row-gap: var(--ss-space-2); }
.ss-gap-y-4  { row-gap: var(--ss-space-4); }
.ss-gap-y-6  { row-gap: var(--ss-space-6); }

/* ─────────────────────────────────────────────
   7. GRID
───────────────────────────────────────────── */
.ss-grid-1    { display: grid; grid-template-columns: repeat(1,1fr); }
.ss-grid-2    { display: grid; grid-template-columns: repeat(2,1fr); }
.ss-grid-3    { display: grid; grid-template-columns: repeat(3,1fr); }
.ss-grid-4    { display: grid; grid-template-columns: repeat(4,1fr); }
.ss-grid-5    { display: grid; grid-template-columns: repeat(5,1fr); }
.ss-grid-6    { display: grid; grid-template-columns: repeat(6,1fr); }
.ss-grid-auto    { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); }
.ss-grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
.ss-grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
.ss-place-center { place-items: center; }
.ss-col-span-2   { grid-column: span 2; }
.ss-col-span-3   { grid-column: span 3; }
.ss-col-full     { grid-column: 1 / -1; }

/* ─────────────────────────────────────────────
   8. SPACING — PADDING & MARGIN
───────────────────────────────────────────── */
.ss-p-0  { padding: 0; }
.ss-p-1  { padding: var(--ss-space-1); }
.ss-p-2  { padding: var(--ss-space-2); }
.ss-p-3  { padding: var(--ss-space-3); }
.ss-p-4  { padding: var(--ss-space-4); }
.ss-p-5  { padding: var(--ss-space-5); }
.ss-p-6  { padding: var(--ss-space-6); }
.ss-p-8  { padding: var(--ss-space-8); }
.ss-p-10 { padding: var(--ss-space-10); }
.ss-p-12 { padding: var(--ss-space-12); }

.ss-px-0  { padding-inline: 0; }
.ss-px-2  { padding-inline: var(--ss-space-2); }
.ss-px-3  { padding-inline: var(--ss-space-3); }
.ss-px-4  { padding-inline: var(--ss-space-4); }
.ss-px-5  { padding-inline: var(--ss-space-5); }
.ss-px-6  { padding-inline: var(--ss-space-6); }
.ss-px-8  { padding-inline: var(--ss-space-8); }
.ss-px-10 { padding-inline: var(--ss-space-10); }

.ss-py-0  { padding-block: 0; }
.ss-py-2  { padding-block: var(--ss-space-2); }
.ss-py-3  { padding-block: var(--ss-space-3); }
.ss-py-4  { padding-block: var(--ss-space-4); }
.ss-py-5  { padding-block: var(--ss-space-5); }
.ss-py-6  { padding-block: var(--ss-space-6); }
.ss-py-8  { padding-block: var(--ss-space-8); }
.ss-py-10 { padding-block: var(--ss-space-10); }
.ss-py-12 { padding-block: var(--ss-space-12); }
.ss-py-16 { padding-block: var(--ss-space-16); }

.ss-pt-0  { padding-top: 0; } .ss-pt-1  { padding-top: var(--ss-space-1); }
.ss-pt-2  { padding-top: var(--ss-space-2); } .ss-pt-3  { padding-top: var(--ss-space-3); }
.ss-pt-4  { padding-top: var(--ss-space-4); } .ss-pt-6  { padding-top: var(--ss-space-6); }
.ss-pt-8  { padding-top: var(--ss-space-8); } .ss-pt-10 { padding-top: var(--ss-space-10); }
.ss-pt-12 { padding-top: var(--ss-space-12); } .ss-pt-16 { padding-top: var(--ss-space-16); }

.ss-pb-0  { padding-bottom: 0; } .ss-pb-1  { padding-bottom: var(--ss-space-1); }
.ss-pb-2  { padding-bottom: var(--ss-space-2); } .ss-pb-3  { padding-bottom: var(--ss-space-3); }
.ss-pb-4  { padding-bottom: var(--ss-space-4); } .ss-pb-6  { padding-bottom: var(--ss-space-6); }
.ss-pb-8  { padding-bottom: var(--ss-space-8); } .ss-pb-10 { padding-bottom: var(--ss-space-10); }
.ss-pb-12 { padding-bottom: var(--ss-space-12); }

.ss-pl-0  { padding-inline-start: 0; } .ss-pl-2  { padding-inline-start: var(--ss-space-2); }
.ss-pl-4  { padding-inline-start: var(--ss-space-4); } .ss-pl-6  { padding-inline-start: var(--ss-space-6); }
.ss-pl-8  { padding-inline-start: var(--ss-space-8); }

.ss-pr-0  { padding-inline-end: 0; } .ss-pr-2  { padding-inline-end: var(--ss-space-2); }
.ss-pr-4  { padding-inline-end: var(--ss-space-4); } .ss-pr-6  { padding-inline-end: var(--ss-space-6); }
.ss-pr-8  { padding-inline-end: var(--ss-space-8); }

.ss-m-0    { margin: 0; } .ss-m-auto { margin: auto; }
.ss-m-2    { margin: var(--ss-space-2); } .ss-m-4 { margin: var(--ss-space-4); }
.ss-mx-auto { margin-inline: auto; } .ss-mx-0 { margin-inline: 0; }
.ss-my-0  { margin-block: 0; } .ss-my-2  { margin-block: var(--ss-space-2); }
.ss-my-4  { margin-block: var(--ss-space-4); } .ss-my-6  { margin-block: var(--ss-space-6); }
.ss-my-8  { margin-block: var(--ss-space-8); } .ss-my-10 { margin-block: var(--ss-space-10); }

.ss-mt-0    { margin-top: 0; } .ss-mt-1    { margin-top: var(--ss-space-1); }
.ss-mt-2    { margin-top: var(--ss-space-2); } .ss-mt-3    { margin-top: var(--ss-space-3); }
.ss-mt-4    { margin-top: var(--ss-space-4); } .ss-mt-5    { margin-top: var(--ss-space-5); }
.ss-mt-6    { margin-top: var(--ss-space-6); } .ss-mt-8    { margin-top: var(--ss-space-8); }
.ss-mt-10   { margin-top: var(--ss-space-10); } .ss-mt-12   { margin-top: var(--ss-space-12); }
.ss-mt-16   { margin-top: var(--ss-space-16); } .ss-mt-auto { margin-top: auto; }

.ss-mb-0    { margin-bottom: 0; } .ss-mb-1    { margin-bottom: var(--ss-space-1); }
.ss-mb-2    { margin-bottom: var(--ss-space-2); } .ss-mb-3    { margin-bottom: var(--ss-space-3); }
.ss-mb-4    { margin-bottom: var(--ss-space-4); } .ss-mb-5    { margin-bottom: var(--ss-space-5); }
.ss-mb-6    { margin-bottom: var(--ss-space-6); } .ss-mb-8    { margin-bottom: var(--ss-space-8); }
.ss-mb-10   { margin-bottom: var(--ss-space-10); } .ss-mb-12   { margin-bottom: var(--ss-space-12); }
.ss-mb-auto { margin-bottom: auto; }

.ss-ml-0    { margin-inline-start: 0; } .ss-ml-2  { margin-inline-start: var(--ss-space-2); }
.ss-ml-4    { margin-inline-start: var(--ss-space-4); } .ss-ml-auto { margin-inline-start: auto; }
.ss-mr-0    { margin-inline-end: 0; } .ss-mr-2  { margin-inline-end: var(--ss-space-2); }
.ss-mr-4    { margin-inline-end: var(--ss-space-4); } .ss-mr-auto { margin-inline-end: auto; }

/* ─────────────────────────────────────────────
   9. TYPOGRAPHY
───────────────────────────────────────────── */
.ss-text-2xs  { font-size: var(--ss-text-2xs); }
.ss-text-xs   { font-size: var(--ss-text-xs); }
.ss-text-sm   { font-size: var(--ss-text-sm); }
.ss-text-base { font-size: var(--ss-text-base); }
.ss-text-md   { font-size: var(--ss-text-md); }
.ss-text-lg   { font-size: var(--ss-text-lg); }
.ss-text-xl   { font-size: var(--ss-text-xl); }
.ss-text-2xl  { font-size: var(--ss-text-2xl); }
.ss-text-3xl  { font-size: var(--ss-text-3xl); }
.ss-text-4xl  { font-size: var(--ss-text-4xl); }
.ss-text-5xl  { font-size: var(--ss-text-5xl); }
.ss-text-6xl  { font-size: var(--ss-text-6xl); }
.ss-text-fluid-sm   { font-size: clamp(14px, 2vw, 16px); }
.ss-text-fluid-md   { font-size: clamp(16px, 2.5vw, 20px); }
.ss-text-fluid-lg   { font-size: clamp(20px, 3vw, 28px); }
.ss-text-fluid-xl   { font-size: clamp(28px, 5vw, 48px); }
.ss-text-fluid-hero { font-size: clamp(32px, 6vw, 64px); }

.ss-font-thin      { font-weight: 100; } .ss-font-light    { font-weight: 300; }
.ss-font-normal    { font-weight: 400; } .ss-font-medium   { font-weight: 500; }
.ss-font-semibold  { font-weight: 600; } .ss-font-bold     { font-weight: 700; }
.ss-font-extrabold { font-weight: 800; } .ss-font-black    { font-weight: 900; }
.ss-font-sans      { font-family: var(--ss-font); }
.ss-font-mono      { font-family: var(--ss-font-mono); }
.ss-font-serif     { font-family: var(--ss-font-serif); }

.ss-text-left    { text-align: left; }   .ss-text-center  { text-align: center; }
.ss-text-right   { text-align: right; }  .ss-text-justify { text-align: justify; }
.ss-uppercase    { text-transform: uppercase; }
.ss-lowercase    { text-transform: lowercase; }
.ss-capitalize   { text-transform: capitalize; }
.ss-normal-case  { text-transform: none; }
.ss-underline    { text-decoration: underline; }
.ss-line-through { text-decoration: line-through; }
.ss-no-underline { text-decoration: none; }
.ss-italic       { font-style: italic; }
.ss-not-italic   { font-style: normal; }

.ss-lh-none    { line-height: 1; }     .ss-lh-tight   { line-height: 1.2; }
.ss-lh-snug    { line-height: 1.375; } .ss-lh-normal  { line-height: 1.5; }
.ss-lh-relaxed { line-height: 1.7; }   .ss-lh-loose   { line-height: 2; }

.ss-tracking-tight   { letter-spacing: -0.025em; }
.ss-tracking-normal  { letter-spacing: 0; }
.ss-tracking-wide    { letter-spacing: 0.05em; }
.ss-tracking-wider   { letter-spacing: 0.1em; }
.ss-tracking-widest  { letter-spacing: 0.2em; }

.ss-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-nowrap     { white-space: nowrap; }
.ss-break-word { word-break: break-word; overflow-wrap: break-word; }
.ss-break-all  { word-break: break-all; }

/* ─────────────────────────────────────────────
   10. COLORS
───────────────────────────────────────────── */
.ss-text-primary      { color: var(--ss-primary); }
.ss-text-primary-dark { color: var(--ss-primary-dark); }
.ss-text-success      { color: var(--ss-success-dark); }
.ss-text-warning      { color: var(--ss-warning-dark); }
.ss-text-danger       { color: var(--ss-danger-dark); }
.ss-text-info         { color: var(--ss-info-dark); }
.ss-text-white        { color: #fff; }
.ss-text-black        { color: #000; }
.ss-text-muted        { color: var(--ss-gray-400); }
.ss-text-subtle       { color: var(--ss-gray-500); }
.ss-text-body         { color: var(--ss-gray-700); }
.ss-text-heading      { color: var(--ss-gray-900); }
.ss-text-gray-400 { color: var(--ss-gray-400); } .ss-text-gray-500 { color: var(--ss-gray-500); }
.ss-text-gray-600 { color: var(--ss-gray-600); } .ss-text-gray-700 { color: var(--ss-gray-700); }
.ss-text-gray-800 { color: var(--ss-gray-800); } .ss-text-gray-900 { color: var(--ss-gray-900); }

.ss-bg-primary        { background-color: var(--ss-primary); }
.ss-bg-primary-light  { background-color: var(--ss-primary-light); }
.ss-bg-success        { background-color: var(--ss-success); }
.ss-bg-success-light  { background-color: var(--ss-success-light); }
.ss-bg-warning        { background-color: var(--ss-warning); }
.ss-bg-warning-light  { background-color: var(--ss-warning-light); }
.ss-bg-danger         { background-color: var(--ss-danger); }
.ss-bg-danger-light   { background-color: var(--ss-danger-light); }
.ss-bg-info           { background-color: var(--ss-info); }
.ss-bg-info-light     { background-color: var(--ss-info-light); }
.ss-bg-white          { background-color: var(--ss-white); }
.ss-bg-black          { background-color: var(--ss-black); }
.ss-bg-transparent    { background-color: transparent; }
.ss-bg-gray-50  { background-color: var(--ss-gray-50); }
.ss-bg-gray-100 { background-color: var(--ss-gray-100); }
.ss-bg-gray-200 { background-color: var(--ss-gray-200); }
.ss-bg-gray-800 { background-color: var(--ss-gray-800); }
.ss-bg-gray-900 { background-color: var(--ss-gray-900); }

/* ─────────────────────────────────────────────
   11. WIDTH & HEIGHT
───────────────────────────────────────────── */
.ss-w-auto  { width: auto; }  .ss-w-full   { width: 100%; }
.ss-w-screen{ width: 100vw; } .ss-w-fit    { width: fit-content; }
.ss-w-min   { width: min-content; } .ss-w-max { width: max-content; }
.ss-w-1-2   { width: 50%; }   .ss-w-1-3    { width: 33.333%; }
.ss-w-2-3   { width: 66.666%; } .ss-w-1-4  { width: 25%; }
.ss-w-3-4   { width: 75%; }   .ss-w-1-5    { width: 20%; }
.ss-w-4-5   { width: 80%; }

.ss-h-auto   { height: auto; }  .ss-h-full   { height: 100%; }
.ss-h-screen { height: 100vh; } .ss-h-dvh    { height: 100dvh; }
.ss-h-fit    { height: fit-content; }

.ss-max-w-xs  { max-width: 320px; }  .ss-max-w-sm  { max-width: 480px; }
.ss-max-w-md  { max-width: 640px; }  .ss-max-w-lg  { max-width: 768px; }
.ss-max-w-xl  { max-width: 1024px; } .ss-max-w-2xl { max-width: 1280px; }
.ss-max-w-full{ max-width: 100%; }   .ss-max-w-none{ max-width: none; }
.ss-min-w-0   { min-width: 0; }      .ss-min-h-screen { min-height: 100vh; }

/* ─────────────────────────────────────────────
   12. BORDERS
───────────────────────────────────────────── */
.ss-border-0 { border: 0; }
.ss-border   { border: 1px solid var(--ss-border-color); }
.ss-border-2 { border: 2px solid var(--ss-border-color); }
.ss-border-t { border-top: 1px solid var(--ss-border-color); }
.ss-border-b { border-bottom: 1px solid var(--ss-border-color); }
.ss-border-l { border-inline-start: 1px solid var(--ss-border-color); }
.ss-border-r { border-inline-end: 1px solid var(--ss-border-color); }
.ss-border-x { border-inline: 1px solid var(--ss-border-color); }
.ss-border-y { border-block: 1px solid var(--ss-border-color); }
.ss-border-primary { border-color: var(--ss-primary); }
.ss-border-success { border-color: var(--ss-success); }
.ss-border-warning { border-color: var(--ss-warning); }
.ss-border-danger  { border-color: var(--ss-danger); }
.ss-border-info    { border-color: var(--ss-info); }
.ss-border-white   { border-color: #fff; }
.ss-border-gray    { border-color: var(--ss-gray-300); }

/* ─────────────────────────────────────────────
   13. BORDER RADIUS
───────────────────────────────────────────── */
.ss-rounded-0    { border-radius: 0; }
.ss-rounded-sm   { border-radius: var(--ss-radius-sm); }
.ss-rounded      { border-radius: var(--ss-radius-md); }
.ss-rounded-lg   { border-radius: var(--ss-radius-lg); }
.ss-rounded-xl   { border-radius: var(--ss-radius-xl); }
.ss-rounded-2xl  { border-radius: var(--ss-radius-2xl); }
.ss-rounded-3xl  { border-radius: var(--ss-radius-3xl); }
.ss-rounded-full { border-radius: var(--ss-radius-full); }
.ss-circle       { border-radius: 50%; }
.ss-rounded-t    { border-top-left-radius: var(--ss-radius-md); border-top-right-radius: var(--ss-radius-md); }
.ss-rounded-b    { border-bottom-left-radius: var(--ss-radius-md); border-bottom-right-radius: var(--ss-radius-md); }

/* ─────────────────────────────────────────────
   14. SHADOW
───────────────────────────────────────────── */
.ss-shadow-none  { box-shadow: none; }       .ss-shadow-xs  { box-shadow: var(--ss-shadow-xs); }
.ss-shadow-sm    { box-shadow: var(--ss-shadow-sm); }  .ss-shadow { box-shadow: var(--ss-shadow-md); }
.ss-shadow-lg    { box-shadow: var(--ss-shadow-lg); }  .ss-shadow-xl { box-shadow: var(--ss-shadow-xl); }
.ss-shadow-inner { box-shadow: var(--ss-shadow-inner); }

/* ─────────────────────────────────────────────
   15. POSITION & Z-INDEX
───────────────────────────────────────────── */
.ss-static   { position: static; }   .ss-relative { position: relative; }
.ss-absolute { position: absolute; } .ss-fixed    { position: fixed; }
.ss-sticky   { position: sticky; }
.ss-inset-0  { inset: 0; } .ss-top-0 { top: 0; } .ss-bottom-0 { bottom: 0; }
.ss-left-0   { inset-inline-start: 0; } .ss-right-0 { inset-inline-end: 0; }
.ss-z-0      { z-index: 0; }    .ss-z-10     { z-index: 10; }
.ss-z-20     { z-index: 20; }   .ss-z-30     { z-index: 30; }
.ss-z-50     { z-index: 50; }   .ss-z-auto   { z-index: auto; }
.ss-z-dropdown { z-index: var(--ss-z-dropdown); }
.ss-z-modal    { z-index: var(--ss-z-modal); }

/* ─────────────────────────────────────────────
   16. OVERFLOW & OPACITY
───────────────────────────────────────────── */
.ss-overflow-hidden   { overflow: hidden; }    .ss-overflow-auto   { overflow: auto; }
.ss-overflow-scroll   { overflow: scroll; }    .ss-overflow-visible{ overflow: visible; }
.ss-overflow-x-hidden { overflow-x: hidden; }  .ss-overflow-y-auto { overflow-y: auto; }
.ss-overflow-x-auto   { overflow-x: auto; }

.ss-opacity-0   { opacity: 0; }    .ss-opacity-10  { opacity: .1; }
.ss-opacity-25  { opacity: .25; }  .ss-opacity-50  { opacity: .5; }
.ss-opacity-75  { opacity: .75; }  .ss-opacity-90  { opacity: .9; }
.ss-opacity-100 { opacity: 1; }

/* ─────────────────────────────────────────────
   17. OBJECT FIT / ASPECT RATIO / MISC
───────────────────────────────────────────── */
.ss-object-contain { object-fit: contain; } .ss-object-cover { object-fit: cover; }
.ss-object-fill    { object-fit: fill; }    .ss-object-none  { object-fit: none; }
.ss-object-center  { object-position: center; } .ss-object-top { object-position: top; }
.ss-ratio-square   { aspect-ratio: 1 / 1; }  .ss-ratio-video { aspect-ratio: 16 / 9; }
.ss-ratio-4-3      { aspect-ratio: 4 / 3; }  .ss-ratio-3-2   { aspect-ratio: 3 / 2; }
.ss-float-left     { float: left; }  .ss-float-right { float: right; }
.ss-float-none     { float: none; }
.ss-clearfix::after { content: ""; display: table; clear: both; }
.ss-list-disc      { list-style: disc; padding-inline-start: 1.5em; }
.ss-list-decimal   { list-style: decimal; padding-inline-start: 1.5em; }
.ss-list-none      { list-style: none; }
.ss-resize         { resize: both; }   .ss-resize-x  { resize: horizontal; }
.ss-resize-y       { resize: vertical; } .ss-resize-none { resize: none; }
.ss-isolate        { isolation: isolate; }

/* ─────────────────────────────────────────────
   18. CURSOR & INTERACTION
───────────────────────────────────────────── */
.ss-cursor-pointer     { cursor: pointer; }  .ss-cursor-default { cursor: default; }
.ss-cursor-not-allowed { cursor: not-allowed; } .ss-cursor-grab { cursor: grab; }
.ss-cursor-text        { cursor: text; }
.ss-select-none        { user-select: none; }  .ss-select-all  { user-select: all; }
.ss-pointer-events-none{ pointer-events: none; } .ss-pointer-events-auto { pointer-events: auto; }

/* ─────────────────────────────────────────────
   19. ACCESSIBILITY
───────────────────────────────────────────── */
.ss-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ss-not-sr-only {
  position: static; width: auto; height: auto;
  padding: 0; margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}
.ss-focus-ring:focus-visible { outline: 3px solid var(--ss-primary); outline-offset: 2px; }

/* ─────────────────────────────────────────────
   20. TRANSITIONS & TRANSFORMS
───────────────────────────────────────────── */
.ss-transition        { transition: var(--ss-transition); }
.ss-transition-none   { transition: none; }
.ss-transition-color  { transition: color var(--ss-duration-200) var(--ss-ease), background-color var(--ss-duration-200) var(--ss-ease); }
.ss-transition-shadow { transition: box-shadow var(--ss-duration-200) var(--ss-ease); }
.ss-duration-150      { transition-duration: var(--ss-duration-150); }
.ss-duration-300      { transition-duration: var(--ss-duration-300); }
.ss-duration-500      { transition-duration: var(--ss-duration-500); }

.ss-scale-90  { transform: scale(.9); }   .ss-scale-95  { transform: scale(.95); }
.ss-scale-105 { transform: scale(1.05); } .ss-scale-110 { transform: scale(1.1); }
.ss-rotate-45  { transform: rotate(45deg); }  .ss-rotate-90  { transform: rotate(90deg); }
.ss-rotate-180 { transform: rotate(180deg); } .ss-rotate-270 { transform: rotate(270deg); }
.ss-translate-center { transform: translate(-50%,-50%); }

.ss-hover-lift:hover    { transform: translateY(-3px); box-shadow: var(--ss-shadow-lg); transition: var(--ss-transition); }
.ss-hover-scale:hover   { transform: scale(1.04); transition: var(--ss-transition); }
.ss-hover-opacity:hover { opacity: .8; transition: var(--ss-transition); }
.ss-hover-shadow:hover  { box-shadow: var(--ss-shadow-lg); transition: var(--ss-transition); }
.ss-hover-primary:hover { background-color: var(--ss-primary); color: #fff; transition: var(--ss-transition); }

/* ─────────────────────────────────────────────
   21. ANIMATIONS
   All wrapped in prefers-reduced-motion
───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ss-spin  { to { transform: rotate(360deg); } }
  @keyframes ss-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
  @keyframes ss-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
  @keyframes ss-shake { 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
  @keyframes ss-fade-in   { from{ opacity:0; } to{ opacity:1; } }
  @keyframes ss-slide-up  { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes ss-slide-down{ from{ opacity:0; transform:translateY(-16px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes ss-zoom-in   { from{ opacity:0; transform:scale(.95); } to{ opacity:1; transform:scale(1); } }
  @keyframes ss-shimmer   { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

  .ss-animate-spin      { animation: ss-spin .8s linear infinite; }
  .ss-animate-pulse     { animation: ss-pulse 1.5s ease-in-out infinite; }
  .ss-animate-bounce    { animation: ss-bounce 1s ease-in-out infinite; }
  .ss-animate-shake     { animation: ss-shake .4s ease; }
  .ss-animate-fade-in   { animation: ss-fade-in var(--ss-duration-300) var(--ss-ease) forwards; }
  .ss-animate-slide-up  { animation: ss-slide-up var(--ss-duration-300) var(--ss-ease) forwards; }
  .ss-animate-slide-down{ animation: ss-slide-down var(--ss-duration-300) var(--ss-ease) forwards; }
  .ss-animate-zoom-in   { animation: ss-zoom-in var(--ss-duration-200) var(--ss-ease) forwards; }
}
.ss-delay-100 { animation-delay: 100ms; } .ss-delay-200 { animation-delay: 200ms; }
.ss-delay-300 { animation-delay: 300ms; } .ss-delay-500 { animation-delay: 500ms; }

/* ─────────────────────────────────────────────
   22. RESPONSIVE PREFIXES
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .ss-xs-hidden { display:none !important; } .ss-xs-block { display:block !important; }
  .ss-xs-flex { display:flex !important; }   .ss-xs-flex-col { flex-direction:column !important; }
  .ss-xs-w-full { width:100% !important; }   .ss-xs-text-center { text-align:center !important; }
  .ss-xs-grid-1 { grid-template-columns:repeat(1,1fr) !important; }
}
@media (min-width:481px) and (max-width:768px) {
  .ss-sm-hidden { display:none !important; } .ss-sm-block { display:block !important; }
  .ss-sm-flex { display:flex !important; }   .ss-sm-flex-col { flex-direction:column !important; }
  .ss-sm-grid-1 { grid-template-columns:repeat(1,1fr) !important; }
  .ss-sm-grid-2 { grid-template-columns:repeat(2,1fr) !important; }
  .ss-sm-w-full { width:100% !important; }   .ss-sm-text-center { text-align:center !important; }
}
@media (min-width:769px) and (max-width:1024px) {
  .ss-md-hidden { display:none !important; } .ss-md-flex { display:flex !important; }
  .ss-md-flex-row { flex-direction:row !important; }
  .ss-md-grid-2 { grid-template-columns:repeat(2,1fr) !important; }
  .ss-md-grid-3 { grid-template-columns:repeat(3,1fr) !important; }
  .ss-md-w-full { width:100% !important; }   .ss-md-w-1-2 { width:50% !important; }
}
@media (min-width:1025px) {
  .ss-lg-hidden { display:none !important; } .ss-lg-flex { display:flex !important; }
  .ss-lg-grid-3 { grid-template-columns:repeat(3,1fr) !important; }
  .ss-lg-grid-4 { grid-template-columns:repeat(4,1fr) !important; }
  .ss-lg-w-1-2  { width:50% !important; }   .ss-lg-w-1-3 { width:33.333% !important; }
}

/* ─────────────────────────────────────────────
   22B. PRINT
───────────────────────────────────────────── */
@media print {
  .ss-print-hidden { display:none !important; }
  .ss-print-block  { display:block !important; }
  .ss-print-color  { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ═══════════════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   23. BUTTON
───────────────────────────────────────────── */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ss-space-2); padding: 9px 20px;
  border-radius: var(--ss-radius-md);
  font-size: var(--ss-text-base); font-weight: 600; font-family: var(--ss-font);
  line-height: 1.4; cursor: pointer; border: 2px solid transparent;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--ss-duration-150) var(--ss-ease),
              border-color var(--ss-duration-150) var(--ss-ease),
              color var(--ss-duration-150) var(--ss-ease),
              transform var(--ss-duration-150) var(--ss-ease);
  -webkit-tap-highlight-color: transparent;
}
.ss-btn:focus-visible { outline: 3px solid var(--ss-primary); outline-offset: 2px; }
.ss-btn:active { transform: scale(.97); }
.ss-btn:disabled, .ss-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.ss-btn-primary  { background: var(--ss-primary); color: #fff; border-color: var(--ss-primary); }
.ss-btn-primary:hover { background: var(--ss-primary-dark); border-color: var(--ss-primary-dark); color: #fff; text-decoration: none; }
.ss-btn-success  { background: var(--ss-success); color: #fff; border-color: var(--ss-success); }
.ss-btn-success:hover { opacity:.88; color:#fff; text-decoration:none; }
.ss-btn-danger   { background: var(--ss-danger); color: #fff; border-color: var(--ss-danger); }
.ss-btn-danger:hover  { opacity:.88; color:#fff; text-decoration:none; }
.ss-btn-warning  { background: var(--ss-warning); color: #fff; border-color: var(--ss-warning); }
.ss-btn-warning:hover { opacity:.88; color:#fff; text-decoration:none; }
.ss-btn-info     { background: var(--ss-info); color: #fff; border-color: var(--ss-info); }
.ss-btn-info:hover    { opacity:.88; color:#fff; text-decoration:none; }
.ss-btn-outline  { background: transparent; color: var(--ss-primary); border-color: var(--ss-primary); }
.ss-btn-outline:hover { background: var(--ss-primary); color: #fff; text-decoration:none; }
.ss-btn-outline-danger { background:transparent; color:var(--ss-danger); border-color:var(--ss-danger); }
.ss-btn-outline-danger:hover { background:var(--ss-danger); color:#fff; text-decoration:none; }
.ss-btn-ghost    { background: transparent; color: var(--ss-primary); border-color: transparent; }
.ss-btn-ghost:hover { background: var(--ss-primary-light); text-decoration:none; }
.ss-btn-gray     { background: var(--ss-gray-100); color: var(--ss-gray-700); border-color: var(--ss-gray-200); }
.ss-btn-gray:hover { background: var(--ss-gray-200); text-decoration:none; }
.ss-btn-dark     { background: var(--ss-gray-900); color: #fff; border-color: var(--ss-gray-900); }
.ss-btn-dark:hover { background: var(--ss-gray-800); color:#fff; text-decoration:none; }
.ss-btn-link     { background:transparent; color:var(--ss-primary); border-color:transparent; padding-inline:0; }
.ss-btn-link:hover { text-decoration:underline; }

.ss-btn-xs    { padding: 4px 10px;  font-size: var(--ss-text-2xs); }
.ss-btn-sm    { padding: 6px 14px;  font-size: var(--ss-text-sm); }
.ss-btn-lg    { padding: 12px 28px; font-size: var(--ss-text-md); }
.ss-btn-xl    { padding: 14px 36px; font-size: var(--ss-text-lg); }
.ss-btn-block { width: 100%; justify-content: center; }
.ss-btn-pill  { border-radius: var(--ss-radius-full); }
.ss-btn-icon  { padding: 8px; border-radius: var(--ss-radius-md); aspect-ratio: 1; }

.ss-btn-loading { pointer-events:none; opacity:.8; }
.ss-btn-loading::before {
  content:''; width:14px; height:14px; border:2px solid currentColor;
  border-top-color:transparent; border-radius:50%; flex-shrink:0;
}
@media (prefers-reduced-motion: no-preference) {
  .ss-btn-loading::before { animation: ss-spin .6s linear infinite; }
}

/* ─────────────────────────────────────────────
   24. CARD
───────────────────────────────────────────── */
.ss-card {
  background: var(--ss-white); border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow-sm); padding: var(--ss-space-5);
  transition: box-shadow var(--ss-duration-200) var(--ss-ease), transform var(--ss-duration-200) var(--ss-ease);
}
.ss-card-flat { background:var(--ss-white); border-radius:var(--ss-radius-lg); border:1px solid var(--ss-border-color); padding:var(--ss-space-5); }
.ss-card-hover:hover { box-shadow:var(--ss-shadow-lg); transform:translateY(-3px); }
.ss-card-clickable { cursor:pointer; }
.ss-card-clickable:hover { box-shadow:var(--ss-shadow-lg); transform:translateY(-2px); }
.ss-card-header { padding-bottom:var(--ss-space-4); border-bottom:1px solid var(--ss-border-color); margin-bottom:var(--ss-space-4); display:flex; align-items:center; justify-content:space-between; }
.ss-card-footer { padding-top:var(--ss-space-4); border-top:1px solid var(--ss-border-color); margin-top:var(--ss-space-4); display:flex; align-items:center; gap:var(--ss-space-2); }
.ss-card-media { margin:calc(-1 * var(--ss-space-5)); margin-bottom:var(--ss-space-5); border-radius:var(--ss-radius-lg) var(--ss-radius-lg) 0 0; overflow:hidden; }
.ss-card-media img { width:100%; object-fit:cover; }

/* ─────────────────────────────────────────────
   25. BADGE
───────────────────────────────────────────── */
.ss-badge { display:inline-flex; align-items:center; gap:var(--ss-space-1); padding:3px 10px; border-radius:var(--ss-radius-full); font-size:var(--ss-text-sm); font-weight:600; line-height:1.5; white-space:nowrap; }
.ss-badge-primary { background:var(--ss-primary-light); color:var(--ss-primary-dark); }
.ss-badge-success { background:var(--ss-success-light); color:var(--ss-success-dark); }
.ss-badge-warning { background:var(--ss-warning-light); color:var(--ss-warning-dark); }
.ss-badge-danger  { background:var(--ss-danger-light);  color:var(--ss-danger-dark); }
.ss-badge-info    { background:var(--ss-info-light);    color:var(--ss-info-dark); }
.ss-badge-gray    { background:var(--ss-gray-100);      color:var(--ss-gray-700); }
.ss-badge-dark    { background:var(--ss-gray-800);      color:#fff; }
.ss-badge-solid-primary { background:var(--ss-primary); color:#fff; }
.ss-badge-solid-success { background:var(--ss-success); color:#fff; }
.ss-badge-solid-danger  { background:var(--ss-danger);  color:#fff; }
.ss-badge-dot::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.ss-badge-sm { padding:1px 7px; font-size:var(--ss-text-2xs); }
.ss-badge-lg { padding:5px 14px; font-size:var(--ss-text-base); }

/* ─────────────────────────────────────────────
   26. ALERT
───────────────────────────────────────────── */
.ss-alert { padding:var(--ss-space-3) var(--ss-space-4); font-size:var(--ss-text-base); line-height:1.6; display:flex; align-items:flex-start; gap:var(--ss-space-3); border-left:4px solid; border-radius:0 var(--ss-radius-md) var(--ss-radius-md) 0; }
.ss-alert-success { background:var(--ss-success-light); color:var(--ss-success-dark); border-color:var(--ss-success); }
.ss-alert-warning { background:var(--ss-warning-light); color:var(--ss-warning-dark); border-color:var(--ss-warning); }
.ss-alert-danger  { background:var(--ss-danger-light);  color:var(--ss-danger-dark);  border-color:var(--ss-danger); }
.ss-alert-info    { background:var(--ss-info-light);    color:var(--ss-info-dark);    border-color:var(--ss-info); }
.ss-alert-gray    { background:var(--ss-gray-100);      color:var(--ss-gray-700);     border-color:var(--ss-gray-400); }
.ss-alert-title   { font-weight:700; margin-bottom:var(--ss-space-1); }
.ss-alert-close   { margin-inline-start:auto; cursor:pointer; opacity:.6; background:none; border:none; font-size:18px; line-height:1; color:inherit; flex-shrink:0; }
.ss-alert-close:hover { opacity:1; }

/* ─────────────────────────────────────────────
   27. FORM ELEMENTS
───────────────────────────────────────────── */
.ss-label { display:block; font-size:var(--ss-text-sm); font-weight:500; color:var(--ss-gray-700); margin-bottom:var(--ss-space-1); }
.ss-label-required::after { content:' *'; color:var(--ss-danger); }
.ss-input, .ss-select, .ss-textarea {
  width:100%; padding:9px 12px;
  border:1.5px solid var(--ss-gray-300);
  border-radius:var(--ss-radius-md);
  font-size:var(--ss-text-base); font-family:var(--ss-font); line-height:1.5;
  outline:none; background:var(--ss-white); color:var(--ss-gray-900);
  transition:border-color var(--ss-duration-150) var(--ss-ease), box-shadow var(--ss-duration-150) var(--ss-ease);
  box-sizing:border-box; appearance:none; -webkit-appearance:none;
}
.ss-input::placeholder, .ss-textarea::placeholder { color:var(--ss-gray-400); }
.ss-input:hover, .ss-select:hover, .ss-textarea:hover { border-color:var(--ss-gray-400); }
.ss-input:focus, .ss-select:focus, .ss-textarea:focus { border-color:var(--ss-primary); box-shadow:0 0 0 3px rgba(var(--ss-primary-rgb),.15); }
.ss-input:disabled, .ss-select:disabled, .ss-textarea:disabled { background:var(--ss-gray-50); color:var(--ss-gray-400); cursor:not-allowed; }
.ss-input-success { border-color:var(--ss-success); }
.ss-input-success:focus { box-shadow:0 0 0 3px rgba(34,197,94,.15); }
.ss-input-error   { border-color:var(--ss-danger); }
.ss-input-error:focus { box-shadow:0 0 0 3px rgba(239,68,68,.15); }
.ss-input-sm { padding:5px 10px; font-size:var(--ss-text-sm); }
.ss-input-lg { padding:12px 16px; font-size:var(--ss-text-md); }
.ss-textarea { min-height:100px; resize:vertical; }
.ss-select { 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='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; cursor:pointer; }
.ss-form-group { margin-bottom:var(--ss-space-5); }
.ss-form-hint  { font-size:var(--ss-text-sm); color:var(--ss-gray-500); margin-top:var(--ss-space-1); }
.ss-form-error { font-size:var(--ss-text-sm); color:var(--ss-danger-dark); margin-top:var(--ss-space-1); }
.ss-input-group { position:relative; }
.ss-input-group .ss-input { padding-inline-start:40px; }
.ss-input-group-icon { position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--ss-gray-400); pointer-events:none; }
.ss-checkbox, .ss-radio { width:16px; height:16px; border:1.5px solid var(--ss-gray-300); background:var(--ss-white); cursor:pointer; appearance:none; -webkit-appearance:none; transition:var(--ss-transition); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.ss-checkbox { border-radius:var(--ss-radius-sm); }
.ss-radio    { border-radius:50%; }
.ss-checkbox:checked { background:var(--ss-primary); border-color:var(--ss-primary); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M2 6l3 3 5-5'/%3E%3C/svg%3E"); background-size:10px; background-repeat:no-repeat; background-position:center; }
.ss-radio:checked { border-color:var(--ss-primary); box-shadow:inset 0 0 0 3px var(--ss-primary); }
.ss-checkbox:focus-visible, .ss-radio:focus-visible { outline:3px solid var(--ss-primary); outline-offset:2px; }
.ss-toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.ss-toggle input { opacity:0; width:0; height:0; }
.ss-toggle-track { position:absolute; inset:0; background:var(--ss-gray-300); border-radius:var(--ss-radius-full); cursor:pointer; transition:background var(--ss-duration-200) var(--ss-ease); }
.ss-toggle-track::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; box-shadow:var(--ss-shadow-xs); transition:transform var(--ss-duration-200) var(--ss-ease); }
.ss-toggle input:checked + .ss-toggle-track { background:var(--ss-primary); }
.ss-toggle input:checked + .ss-toggle-track::before { transform:translateX(20px); }
.ss-toggle input:focus-visible + .ss-toggle-track { outline:3px solid var(--ss-primary); outline-offset:2px; }
.ss-range { width:100%; -webkit-appearance:none; appearance:none; height:4px; background:var(--ss-gray-200); border-radius:var(--ss-radius-full); outline:none; cursor:pointer; }
.ss-range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--ss-primary); cursor:pointer; box-shadow:var(--ss-shadow-sm); }
.ss-range:focus-visible { outline:3px solid var(--ss-primary); outline-offset:4px; }

/* ─────────────────────────────────────────────
   28. AVATAR
───────────────────────────────────────────── */
.ss-avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; background:var(--ss-gray-200); color:var(--ss-gray-600); font-weight:700; flex-shrink:0; }
.ss-avatar img { width:100%; height:100%; object-fit:cover; }
.ss-avatar-xs { width:24px;  height:24px;  font-size:10px; }
.ss-avatar-sm { width:32px;  height:32px;  font-size:12px; }
.ss-avatar-md { width:48px;  height:48px;  font-size:16px; }
.ss-avatar-lg { width:64px;  height:64px;  font-size:22px; }
.ss-avatar-xl { width:96px;  height:96px;  font-size:32px; }
.ss-avatar-2xl{ width:128px; height:128px; font-size:42px; }
.ss-avatar-group { display:flex; }
.ss-avatar-group .ss-avatar { border:2px solid var(--ss-white); margin-inline-start:-8px; }
.ss-avatar-group .ss-avatar:first-child { margin-inline-start:0; }
.ss-avatar-wrapper { position:relative; display:inline-flex; }
.ss-avatar-status { position:absolute; bottom:0; right:0; width:10px; height:10px; border-radius:50%; border:2px solid var(--ss-white); }
.ss-avatar-online  { background:var(--ss-success); }
.ss-avatar-offline { background:var(--ss-gray-400); }
.ss-avatar-busy    { background:var(--ss-danger); }
.ss-avatar-away    { background:var(--ss-warning); }

/* ─────────────────────────────────────────────
   29. DIVIDER
───────────────────────────────────────────── */
.ss-divider { border:none; border-top:1px solid var(--ss-border-color); margin-block:var(--ss-space-4); }
.ss-divider-thick  { border-top-width:2px; }
.ss-divider-dashed { border-top-style:dashed; }
.ss-divider-dotted { border-top-style:dotted; }
.ss-divider-text { display:flex; align-items:center; gap:var(--ss-space-3); margin-block:var(--ss-space-4); font-size:var(--ss-text-sm); color:var(--ss-gray-400); }
.ss-divider-text::before, .ss-divider-text::after { content:''; flex:1; border-top:1px solid var(--ss-border-color); }

/* ─────────────────────────────────────────────
   30. SKELETON LOADER
───────────────────────────────────────────── */
.ss-skeleton { background:linear-gradient(90deg,var(--ss-gray-100) 25%,var(--ss-gray-200) 50%,var(--ss-gray-100) 75%); background-size:200% 100%; border-radius:var(--ss-radius-md); color:transparent !important; }
@media (prefers-reduced-motion: no-preference) { .ss-skeleton { animation:ss-shimmer 1.5s infinite; } }
.ss-skeleton-text   { height:14px; margin-bottom:var(--ss-space-2); }
.ss-skeleton-title  { height:22px; margin-bottom:var(--ss-space-3); width:60%; }
.ss-skeleton-avatar { border-radius:50%; }
.ss-skeleton-btn    { height:38px; width:100px; }
.ss-skeleton-card   { height:180px; }

/* ─────────────────────────────────────────────
   31. TOOLTIP
───────────────────────────────────────────── */
[data-ss-tooltip] { position:relative; cursor:default; }
[data-ss-tooltip]::before { content:''; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--ss-gray-800); opacity:0; pointer-events:none; transition:opacity var(--ss-duration-150) var(--ss-ease); z-index:var(--ss-z-tooltip); }
[data-ss-tooltip]::after { content:attr(data-ss-tooltip); position:absolute; bottom:calc(100% + 14px); left:50%; transform:translateX(-50%); background:var(--ss-gray-800); color:#fff; font-size:var(--ss-text-sm); white-space:nowrap; padding:5px 10px; border-radius:var(--ss-radius-sm); opacity:0; pointer-events:none; transition:opacity var(--ss-duration-150) var(--ss-ease); z-index:var(--ss-z-tooltip); }
[data-ss-tooltip]:hover::before, [data-ss-tooltip]:hover::after,
[data-ss-tooltip]:focus::before,  [data-ss-tooltip]:focus::after { opacity:1; }
[data-ss-tooltip-pos="bottom"]::before { top:calc(100% + 4px); bottom:auto; border-top-color:transparent; border-bottom-color:var(--ss-gray-800); }
[data-ss-tooltip-pos="bottom"]::after  { top:calc(100% + 14px); bottom:auto; }

/* ─────────────────────────────────────────────
   32. PROGRESS BAR
───────────────────────────────────────────── */
.ss-progress { width:100%; background:var(--ss-gray-200); border-radius:var(--ss-radius-full); overflow:hidden; height:8px; }
.ss-progress-bar { height:100%; background:var(--ss-primary); border-radius:var(--ss-radius-full); transition:width var(--ss-duration-300) var(--ss-ease); }
.ss-progress-success .ss-progress-bar { background:var(--ss-success); }
.ss-progress-warning .ss-progress-bar { background:var(--ss-warning); }
.ss-progress-danger  .ss-progress-bar { background:var(--ss-danger); }
.ss-progress-xs { height:3px; } .ss-progress-sm { height:5px; }
.ss-progress-lg { height:12px; } .ss-progress-xl { height:18px; }

/* ─────────────────────────────────────────────
   33. TABLE
───────────────────────────────────────────── */
.ss-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ss-table { width:100%; border-collapse:collapse; font-size:var(--ss-text-base); background:var(--ss-white); }
.ss-table th, .ss-table td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--ss-border-color); }
.ss-table th { font-weight:600; font-size:var(--ss-text-sm); color:var(--ss-gray-600); background:var(--ss-gray-50); white-space:nowrap; }
.ss-table tbody tr:hover { background:var(--ss-gray-50); }
.ss-table-striped tbody tr:nth-child(even) { background:var(--ss-gray-50); }
.ss-table-bordered th, .ss-table-bordered td { border:1px solid var(--ss-border-color); }
.ss-table-primary th { background:var(--ss-primary); color:#fff; }

/* ─────────────────────────────────────────────
   34. CODE BLOCK
───────────────────────────────────────────── */
.ss-code-block { position:relative; background:var(--ss-gray-900); border-radius:var(--ss-radius-lg); padding:var(--ss-space-5); overflow-x:auto; }
.ss-code-block code { font-family:var(--ss-font-mono); font-size:var(--ss-text-sm); color:#a5b4fc; background:transparent; padding:0; border-radius:0; line-height:1.8; display:block; white-space:pre; }
.ss-code-copy { position:absolute; top:var(--ss-space-3); right:var(--ss-space-3); background:var(--ss-gray-700); color:#a5b4fc; border:none; border-radius:var(--ss-radius-sm); padding:4px 10px; font-size:var(--ss-text-sm); font-weight:600; cursor:pointer; transition:background var(--ss-duration-150) var(--ss-ease); }
.ss-code-copy:hover { background:var(--ss-gray-600); }

/* ─────────────────────────────────────────────
   35. SECTION HELPER
───────────────────────────────────────────── */
.ss-section    { padding-block:var(--ss-space-16); }
.ss-section-sm { padding-block:var(--ss-space-10); }
.ss-section-lg { padding-block:var(--ss-space-24); }
.ss-section-header { text-align:center; max-width:600px; margin-inline:auto; margin-bottom:var(--ss-space-12); }
.ss-section-label { display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ss-primary); background:var(--ss-primary-light); padding:4px 12px; border-radius:var(--ss-radius-full); margin-bottom:var(--ss-space-3); }
.ss-section-title { font-size:var(--ss-text-3xl); font-weight:900; color:var(--ss-gray-900); margin-bottom:var(--ss-space-3); line-height:1.2; }
.ss-section-sub   { font-size:var(--ss-text-lg); color:var(--ss-gray-500); line-height:1.7; margin:0; }

/* ─────────────────────────────────────────────
   36. NAVBAR
───────────────────────────────────────────── */
.ss-navbar { display:flex; align-items:center; justify-content:space-between; padding:0 var(--ss-space-6); height:64px; background:var(--ss-white); border-bottom:1px solid var(--ss-border-color); position:sticky; top:0; z-index:var(--ss-z-sticky); box-shadow:var(--ss-shadow-xs); }
.ss-navbar-brand { font-size:var(--ss-text-lg); font-weight:700; color:var(--ss-gray-900); text-decoration:none; display:flex; align-items:center; gap:var(--ss-space-2); }
.ss-navbar-brand:hover { text-decoration:none; }
.ss-navbar-links { display:flex; align-items:center; gap:var(--ss-space-1); list-style:none; }
.ss-navbar-links a { display:inline-flex; align-items:center; padding:var(--ss-space-2) var(--ss-space-3); font-size:var(--ss-text-base); font-weight:500; color:var(--ss-gray-600); border-radius:var(--ss-radius-md); transition:background var(--ss-duration-150) var(--ss-ease), color var(--ss-duration-150) var(--ss-ease); text-decoration:none; }
.ss-navbar-links a:hover, .ss-navbar-links a.ss-active { background:var(--ss-primary-light); color:var(--ss-primary); text-decoration:none; }
.ss-navbar-end { display:flex; align-items:center; gap:var(--ss-space-2); }

/* ─────────────────────────────────────────────
   37. MODAL
───────────────────────────────────────────── */
.ss-modal { position:fixed; inset:0; z-index:var(--ss-z-modal); display:flex; align-items:center; justify-content:center; padding:var(--ss-space-4); background:rgba(0,0,0,.5); }
.ss-modal-box { background:var(--ss-white); border-radius:var(--ss-radius-xl); box-shadow:var(--ss-shadow-xl); width:100%; max-width:500px; max-height:90vh; overflow-y:auto; position:relative; }
.ss-modal-header { display:flex; align-items:center; justify-content:space-between; padding:var(--ss-space-5) var(--ss-space-5) var(--ss-space-4); border-bottom:1px solid var(--ss-border-color); }
.ss-modal-title  { font-size:var(--ss-text-xl); font-weight:700; margin:0; }
.ss-modal-body   { padding:var(--ss-space-5); }
.ss-modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:var(--ss-space-2); padding:var(--ss-space-4) var(--ss-space-5); border-top:1px solid var(--ss-border-color); }
.ss-modal-close  { background:none; border:none; cursor:pointer; font-size:22px; color:var(--ss-gray-400); line-height:1; padding:4px; border-radius:var(--ss-radius-sm); transition:color var(--ss-duration-150) var(--ss-ease); }
.ss-modal-close:hover { color:var(--ss-gray-700); }

/* ─────────────────────────────────────────────
   38. DROPDOWN
───────────────────────────────────────────── */
.ss-dropdown { position:relative; display:inline-flex; }
.ss-dropdown-menu { position:absolute; top:calc(100% + var(--ss-space-1)); left:0; min-width:180px; background:var(--ss-white); border:1px solid var(--ss-border-color); border-radius:var(--ss-radius-lg); box-shadow:var(--ss-shadow-lg); padding:var(--ss-space-1); z-index:var(--ss-z-dropdown); display:none; }
.ss-dropdown:hover .ss-dropdown-menu, .ss-dropdown.ss-open .ss-dropdown-menu { display:block; }
.ss-dropdown-item { display:flex; align-items:center; gap:var(--ss-space-2); padding:var(--ss-space-2) var(--ss-space-3); font-size:var(--ss-text-base); color:var(--ss-gray-700); border-radius:var(--ss-radius-md); cursor:pointer; text-decoration:none; transition:background var(--ss-duration-100) var(--ss-ease); }
.ss-dropdown-item:hover { background:var(--ss-gray-100); text-decoration:none; }
.ss-dropdown-item.ss-active { background:var(--ss-primary-light); color:var(--ss-primary); }
.ss-dropdown-divider { height:1px; background:var(--ss-border-color); margin:var(--ss-space-1) 0; }
.ss-dropdown-header { padding:var(--ss-space-2) var(--ss-space-3) var(--ss-space-1); font-size:var(--ss-text-xs); font-weight:600; color:var(--ss-gray-400); text-transform:uppercase; letter-spacing:.8px; }

/* ─────────────────────────────────────────────
   39. TABS
───────────────────────────────────────────── */
.ss-tabs { display:flex; flex-direction:column; }
.ss-tab-list { display:flex; border-bottom:2px solid var(--ss-border-color); overflow-x:auto; scrollbar-width:none; }
.ss-tab-list::-webkit-scrollbar { display:none; }
.ss-tab { padding:var(--ss-space-3) var(--ss-space-5); font-size:var(--ss-text-base); font-weight:500; color:var(--ss-gray-500); border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; white-space:nowrap; background:none; border-top:none; border-left:none; border-right:none; font-family:var(--ss-font); transition:color var(--ss-duration-150) var(--ss-ease); }
.ss-tab:hover { color:var(--ss-primary); }
.ss-tab.ss-active { color:var(--ss-primary); border-bottom-color:var(--ss-primary); font-weight:600; }
.ss-tab-panel { padding-top:var(--ss-space-5); }
.ss-tab-panel:not(.ss-active) { display:none; }
.ss-tabs-pill .ss-tab-list { border-bottom:none; background:var(--ss-gray-100); border-radius:var(--ss-radius-full); padding:var(--ss-space-1); gap:var(--ss-space-1); display:inline-flex; }
.ss-tabs-pill .ss-tab { border-radius:var(--ss-radius-full); border:none; padding:var(--ss-space-2) var(--ss-space-4); margin:0; }
.ss-tabs-pill .ss-tab.ss-active { background:var(--ss-white); color:var(--ss-primary); box-shadow:var(--ss-shadow-sm); border-bottom-color:transparent; }

/* ─────────────────────────────────────────────
   40. ACCORDION (native <details>)
───────────────────────────────────────────── */
.ss-accordion { border:1px solid var(--ss-border-color); border-radius:var(--ss-radius-lg); overflow:hidden; }
.ss-accordion details + details { border-top:1px solid var(--ss-border-color); }
.ss-accordion summary { display:flex; align-items:center; justify-content:space-between; padding:var(--ss-space-4) var(--ss-space-5); font-weight:500; cursor:pointer; list-style:none; transition:background var(--ss-duration-150) var(--ss-ease); user-select:none; }
.ss-accordion summary::-webkit-details-marker { display:none; }
.ss-accordion summary:hover { background:var(--ss-gray-50); }
.ss-accordion summary::after { content:'+'; font-size:20px; color:var(--ss-gray-400); font-weight:300; transition:transform var(--ss-duration-200) var(--ss-ease); flex-shrink:0; }
.ss-accordion details[open] summary::after { transform:rotate(45deg); }
.ss-accordion-body { padding:0 var(--ss-space-5) var(--ss-space-4); }

/* ─────────────────────────────────────────────
   41. TOAST
───────────────────────────────────────────── */
.ss-toast-container { position:fixed; z-index:var(--ss-z-toast); display:flex; flex-direction:column; gap:var(--ss-space-2); pointer-events:none; }
.ss-toast-container.ss-top-right    { top:var(--ss-space-4); right:var(--ss-space-4); }
.ss-toast-container.ss-top-left     { top:var(--ss-space-4); left:var(--ss-space-4); }
.ss-toast-container.ss-bottom-right { bottom:var(--ss-space-4); right:var(--ss-space-4); }
.ss-toast-container.ss-bottom-left  { bottom:var(--ss-space-4); left:var(--ss-space-4); }
.ss-toast { display:flex; align-items:flex-start; gap:var(--ss-space-3); padding:var(--ss-space-3) var(--ss-space-4); background:var(--ss-gray-900); color:#fff; border-radius:var(--ss-radius-lg); box-shadow:var(--ss-shadow-xl); min-width:280px; max-width:380px; pointer-events:all; font-size:var(--ss-text-sm); }
.ss-toast-success { background:var(--ss-success-dark); }
.ss-toast-warning { background:var(--ss-warning-dark); }
.ss-toast-danger  { background:var(--ss-danger-dark); }
.ss-toast-info    { background:var(--ss-info-dark); }
.ss-toast-title   { font-weight:600; font-size:var(--ss-text-base); }
.ss-toast-close   { margin-inline-start:auto; background:none; border:none; color:inherit; opacity:.6; cursor:pointer; font-size:16px; flex-shrink:0; }
.ss-toast-close:hover { opacity:1; }

/* ─────────────────────────────────────────────
   42. CHIP / TAG
───────────────────────────────────────────── */
.ss-chip { display:inline-flex; align-items:center; gap:var(--ss-space-1); padding:4px 12px; background:var(--ss-gray-100); color:var(--ss-gray-700); border-radius:var(--ss-radius-full); font-size:var(--ss-text-sm); font-weight:500; border:1px solid var(--ss-gray-200); white-space:nowrap; }
.ss-chip-primary { background:var(--ss-primary-light); color:var(--ss-primary-dark); border-color:var(--ss-primary-light); }
.ss-chip-success { background:var(--ss-success-light); color:var(--ss-success-dark); border-color:var(--ss-success-light); }
.ss-chip-danger  { background:var(--ss-danger-light);  color:var(--ss-danger-dark);  border-color:var(--ss-danger-light); }
.ss-chip-close   { cursor:pointer; font-size:14px; opacity:.6; margin-inline-start:2px; background:none; border:none; color:inherit; }
.ss-chip-close:hover { opacity:1; }

/* ─────────────────────────────────────────────
   43. STEPPER / WIZARD
───────────────────────────────────────────── */
.ss-stepper { display:flex; align-items:center; }
.ss-step    { display:flex; align-items:center; flex:1; }
.ss-step:last-child { flex:none; }
.ss-step-circle { width:32px; height:32px; border-radius:50%; background:var(--ss-gray-200); color:var(--ss-gray-500); display:flex; align-items:center; justify-content:center; font-size:var(--ss-text-sm); font-weight:600; flex-shrink:0; transition:var(--ss-transition); }
.ss-step.ss-active   .ss-step-circle { background:var(--ss-primary); color:#fff; }
.ss-step.ss-complete .ss-step-circle { background:var(--ss-success); color:#fff; }
.ss-step-label { font-size:var(--ss-text-sm); font-weight:500; color:var(--ss-gray-500); margin-top:var(--ss-space-1); }
.ss-step.ss-active .ss-step-label { color:var(--ss-primary); }
.ss-step-line { flex:1; height:2px; background:var(--ss-gray-200); margin-inline:var(--ss-space-2); }
.ss-step.ss-complete + .ss-step .ss-step-line { background:var(--ss-success); }

/* ─────────────────────────────────────────────
   44. STAT CARD
───────────────────────────────────────────── */
.ss-stat { background:var(--ss-gray-50); border-radius:var(--ss-radius-lg); padding:var(--ss-space-5); }
.ss-stat-label { font-size:var(--ss-text-sm); color:var(--ss-gray-500); font-weight:500; margin-bottom:var(--ss-space-1); }
.ss-stat-value { font-size:var(--ss-text-3xl); font-weight:800; color:var(--ss-gray-900); line-height:1; margin-bottom:var(--ss-space-1); }
.ss-stat-change { font-size:var(--ss-text-sm); font-weight:500; display:inline-flex; align-items:center; gap:3px; }
.ss-stat-up   { color:var(--ss-success-dark); }
.ss-stat-down { color:var(--ss-danger-dark); }

/* ─────────────────────────────────────────────
   45. SPINNER
───────────────────────────────────────────── */
.ss-spinner { display:inline-block; width:24px; height:24px; border:3px solid var(--ss-gray-200); border-top-color:var(--ss-primary); border-radius:50%; }
@media (prefers-reduced-motion: no-preference) { .ss-spinner { animation:ss-spin .7s linear infinite; } }
.ss-spinner-sm  { width:16px; height:16px; border-width:2px; }
.ss-spinner-lg  { width:40px; height:40px; border-width:4px; }
.ss-spinner-xl  { width:56px; height:56px; border-width:5px; }
.ss-spinner-success { border-top-color:var(--ss-success); }
.ss-spinner-danger  { border-top-color:var(--ss-danger); }
.ss-spinner-white   { border-color:rgba(255,255,255,.3); border-top-color:#fff; }

/* ─────────────────────────────────────────────
   46. HERO SECTION HELPER
───────────────────────────────────────────── */
.ss-hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:var(--ss-space-16) var(--ss-space-4); }
.ss-hero-title { font-size:clamp(32px,6vw,64px); font-weight:900; line-height:1.1; margin-bottom:var(--ss-space-5); }
.ss-hero-sub   { font-size:clamp(16px,2vw,20px); color:var(--ss-gray-500); line-height:1.7; max-width:560px; margin-inline:auto; margin-bottom:var(--ss-space-8); }
.ss-hero-cta   { display:flex; gap:var(--ss-space-3); justify-content:center; flex-wrap:wrap; }

/* ─────────────────────────────────────────────
   MOBILE OVERRIDES
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .ss-navbar-links { display:none; }
  .ss-navbar-links.ss-open { display:flex; flex-direction:column; }
  .ss-modal-box { max-width:100%; margin:0; border-radius:var(--ss-radius-xl) var(--ss-radius-xl) 0 0; }
  .ss-toast { min-width:auto; max-width:calc(100vw - 32px); }
  .ss-stepper { flex-direction:column; align-items:flex-start; gap:var(--ss-space-3); }
  .ss-step-line { display:none; }
}