/*
 * ============================================================
 * GOJI.MY — Master CSS Framework
 * Version: 1.0.0
 * Stack: Bootstrap 5.3 compatible · HTML5 · CSS3
 * Load order: Bootstrap 5.3 → goji-framework.css → main.css
 *
 * § 01 · Brand Color Primitives
 * § 02 · Semantic Tokens — Light Theme (default)
 * § 03 · Semantic Tokens — Dark Theme
 * § 04 · Typography System
 * § 05 · Spacing & Sizing Scale
 * § 06 · Grid & Layout Helpers
 * § 07 · Border Radius System
 * § 08 · Z-Index System
 * § 09 · Transition & Animation System
 * § 10 · Global Base & Reset
 * § 11 · gs-btn — Button System
 * § 12 · gs-form — Form Controls
 * § 13 · gs-card — Card System
 * § 14 · gs-table — Table System
 * § 15 · gs-navbar — Navigation Bar
 * § 16 · gs-topbar — Announcement Bar
 * § 17 · gs-mega-menu — Mega Menu & Mobile Drawer
 * § 18 · gs-footer — Footer
 * § 19 · gs-sidebar — Sidebar Navigation
 * § 20 · gs-dashboard — Dashboard Layout
 * § 21 · gs-pricing — Pricing Cards
 * § 22 · gs-auth — Auth Pages
 * § 23 · gs-blog — Blog Components
 * § 24 · gs-card-tool — Tool Cards
 * § 25 · gs-card-review — Review Cards
 * § 26 · gs-search — Search Bar
 * § 27 · gs-filter — Filter Components
 * § 28 · gs-modal — Modals
 * § 29 · gs-drawer — Drawers
 * § 30 · gs-toast — Toast Notifications
 * § 31 · gs-widget — Dashboard Widgets
 * § 32 · Utility Classes (badges, alerts, avatars, tabs, etc.)
 * § 33 · Accessibility
 * § 34 · Print Styles
 * ============================================================
 */

/* ============================================================
 * § 01 · BRAND COLOR PRIMITIVES
 * Raw scale values — never use directly in components.
 * Always use semantic tokens from § 02 / § 03.
 * ============================================================ */

:root {
  /* Purple Scale — Primary Brand */
  --gs-purple-50:  #F5F3FF;
  --gs-purple-100: #EDE9FE;
  --gs-purple-200: #DDD6FE;
  --gs-purple-300: #C4B5FD;
  --gs-purple-400: #A78BFA;
  --gs-purple-500: #8B5CF6;
  --gs-purple-600: #7C3AED;
  --gs-purple-700: #6D28D9;
  --gs-purple-800: #5B21B6;
  --gs-purple-900: #4C1D95;
  --gs-purple-950: #2E1065;

  /* Green Scale — Secondary Brand */
  --gs-green-50:  #F0FDF4;
  --gs-green-100: #DCFCE7;
  --gs-green-300: #86EFAC;
  --gs-green-400: #4ADE80;
  --gs-green-500: #22C55E;
  --gs-green-600: #16A34A;
  --gs-green-700: #3D8B37;
  --gs-green-800: #166534;

  /* Blue Scale — Tertiary / Trust */
  --gs-blue-50:  #EFF6FF;
  --gs-blue-100: #DBEAFE;
  --gs-blue-400: #60A5FA;
  --gs-blue-600: #2563EB;
  --gs-blue-700: #1D4ED8;
  --gs-blue-800: #1E40AF;

  /* Confetti Accent Colors — decorative use only */
  --gs-orange-400: #FB923C;
  --gs-orange-500: #F97316;
  --gs-lime-400:   #A3E635;
  --gs-lime-500:   #84CC16;
  --gs-violet-400: #A78BFA;
  --gs-sky-400:    #38BDF8;

  /* Neutral Scale */
  --gs-neutral-0:   #FFFFFF;
  --gs-neutral-50:  #F9FAFB;
  --gs-neutral-100: #F3F4F6;
  --gs-neutral-150: #EAECF0;
  --gs-neutral-200: #E5E7EB;
  --gs-neutral-300: #D1D5DB;
  --gs-neutral-400: #9CA3AF;
  --gs-neutral-500: #6B7280;
  --gs-neutral-600: #4B5563;
  --gs-neutral-700: #374151;
  --gs-neutral-800: #1F2937;
  --gs-neutral-900: #111827;
  --gs-neutral-950: #030712; 

}

/* ============================================================
 * § 02 · SEMANTIC TOKENS — LIGHT THEME (default)
 * Applied to :root and [data-theme="light"]
 * ============================================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Brand semantic tokens */
  --gs-cp:              #5B21B6; /* primary */
  --gs-cp-h:            #6D28D9; /* primary hover */
  --gs-cp-a:            #4C1D95; /* primary active */
  --gs-cp-s:            #F5F3FF; /* primary subtle */
  --gs-cp-m:            #EDE9FE; /* primary muted */
  --gs-cp-b:            #DDD6FE; /* primary border */
  --gs-cp-t:            #5B21B6; /* primary text */
  --gs-cp-fg:           #FFFFFF; /* primary foreground (on solid) */
  --gs-cs:              #3D8B37; /* secondary */
  --gs-cs-h:            #166534; /* secondary hover */
  --gs-cs-s:            #F0FDF4; /* secondary subtle */
  --gs-cs-m:            #DCFCE7; /* secondary muted */
  --gs-ct:              #1D4ED8; /* tertiary */
  --gs-ct-h:            #1E40AF; /* tertiary hover */
  --gs-ct-s:            #EFF6FF; /* tertiary subtle */

  /* Aliases for readability */
  --gs-color-primary:         var(--gs-cp);
  --gs-color-primary-hover:   var(--gs-cp-h);
  --gs-color-primary-active:  var(--gs-cp-a);
  --gs-color-primary-subtle:  var(--gs-cp-s);
  --gs-color-primary-muted:   var(--gs-cp-m);
  --gs-color-primary-border:  var(--gs-cp-b);
  --gs-color-primary-text:    var(--gs-cp-t);
  --gs-color-primary-fg:      var(--gs-cp-fg);
  --gs-color-secondary:       var(--gs-cs);
  --gs-color-tertiary:        var(--gs-ct);

  /* Surface elevation layers */
  --gs-surface-0: #FFFFFF;
  --gs-surface-1: #FFFFFF;
  --gs-surface-2: #F9FAFB;
  --gs-surface-3: #F3F4F6;
  --gs-surface-4: #E5E7EB;

  /* Background tokens */
  --gs-bg-base:    #FFFFFF;
  --gs-bg-subtle:  #F5F5F6;
  --gs-bg-muted:   #F3F4F6;
  --gs-bg-emphasis:#E5E7EB;
  --gs-bg-inverse: #111827;
  --gs-bg-overlay: rgba(17,24,39,0.48);

  /* Border tokens */
  --gs-border-subtle:  #EAECF0;
  --gs-border-default: #E5E7EB;
  --gs-border-strong:  #D1D5DB;
  --gs-border-inverse: #374151;

  /* Text tokens */
  --gs-text-primary:   #111827;
  --gs-text-secondary: #374151;
  --gs-text-tertiary:  #6B7280;
  --gs-text-disabled:  #9CA3AF;
  --gs-text-inverse:   #FFFFFF;
  --gs-text-link:      #5B21B6;
  --gs-text-link-hover:#6D28D9;

  /* Status tokens */
  --gs-status-success-bg:     #F0FDF4;
  --gs-status-success-border: #86EFAC;
  --gs-status-success-icon:   #16A34A;
  --gs-status-success-text:   #15803D;
  --gs-status-warning-bg:     #FFFBEB;
  --gs-status-warning-border: #FCD34D;
  --gs-status-warning-icon:   #CA8A04;
  --gs-status-warning-text:   #92400E;
  --gs-status-error-bg:       #FEF2F2;
  --gs-status-error-border:   #FCA5A5;
  --gs-status-error-icon:     #DC2626;
  --gs-status-error-text:     #991B1B;
  --gs-status-info-bg:        #EFF6FF;
  --gs-status-info-border:    #93C5FD;
  --gs-status-info-icon:      #2563EB;
  --gs-status-info-text:      #1E40AF;
  --gs-error:    #DC2626;
  --gs-success:  #16A34A;
  --gs-warning:  #CA8A04;
  --gs-info:     #2563EB;

  /* Focus rings — 2px offset + 3px ring for WCAG 2.4.11 compliance */
  --gs-focus-ring:         0 0 0 2px var(--gs-surface-0), 0 0 0 4px rgba(91,33,182,0.55);
  --gs-focus-ring-error:   0 0 0 2px var(--gs-surface-0), 0 0 0 4px rgba(220,38,38,0.55);
  --gs-focus-ring-success: 0 0 0 2px var(--gs-surface-0), 0 0 0 4px rgba(22,163,74,0.55);

  /* Purple-tinted shadows — refined elevation stack */
  --gs-shadow-xs:    0 1px 2px rgba(17,24,39,0.05), 0 0 1px rgba(91,33,182,0.04);
  --gs-shadow-sm:    0 1px 3px rgba(17,24,39,0.08), 0 1px 2px rgba(91,33,182,0.05);
  --gs-shadow-md:    0 4px 8px rgba(17,24,39,0.08), 0 2px 4px rgba(91,33,182,0.05);
  --gs-shadow-lg:    0 12px 20px rgba(91,33,182,0.10), 0 4px 8px rgba(17,24,39,0.06);
  --gs-shadow-xl:    0 24px 32px rgba(91,33,182,0.12), 0 8px 16px rgba(17,24,39,0.06);
  --gs-shadow-2xl:   0 32px 60px rgba(91,33,182,0.18), 0 12px 24px rgba(17,24,39,0.08);
  --gs-shadow-inner: inset 0 2px 4px rgba(91,33,182,0.06);
  --gs-shadow-none:  none;
  /* Brand glow shadows */
  --gs-shadow-primary:    0 4px 16px rgba(91,33,182,0.38);
  --gs-shadow-primary-lg: 0 8px 28px rgba(91,33,182,0.44);
  --gs-shadow-secondary:  0 4px 14px rgba(61,139,55,0.32);
  --gs-shadow-tertiary:   0 4px 14px rgba(29,78,216,0.32);
}

/* ============================================================
 * § 03 · SEMANTIC TOKENS — DARK THEME
 * Applied via [data-theme="dark"] on <html>
 * Deep navy palette — not generic greys
 * ============================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  /* Brightened brand colors for contrast on dark surfaces */
  --gs-cp:              #A78BFA;
  --gs-cp-h:            #C4B5FD;
  --gs-cp-a:            #8B5CF6;
  --gs-cp-s:            rgba(109,40,217,0.12);
  --gs-cp-m:            rgba(109,40,217,0.20);
  --gs-cp-b:            rgba(167,139,250,0.25);
  --gs-cp-t:            #C4B5FD;
  --gs-cp-fg:           #0C0E14;
  --gs-cs:              #4ADE80;
  --gs-cs-h:            #86EFAC;
  --gs-cs-s:            rgba(74,222,128,0.12);
  --gs-cs-m:            rgba(74,222,128,0.20);
  --gs-ct:              #60A5FA;
  --gs-ct-h:            #93C5FD;
  --gs-ct-s:            rgba(96,165,250,0.12);

  --gs-color-primary:         var(--gs-cp);
  --gs-color-primary-hover:   var(--gs-cp-h);
  --gs-color-primary-active:  var(--gs-cp-a);
  --gs-color-primary-subtle:  var(--gs-cp-s);
  --gs-color-primary-muted:   var(--gs-cp-m);
  --gs-color-primary-border:  var(--gs-cp-b);
  --gs-color-primary-text:    var(--gs-cp-t);
  --gs-color-primary-fg:      var(--gs-cp-fg);
  --gs-color-secondary:       var(--gs-cs);
  --gs-color-tertiary:        var(--gs-ct);

  /* Deep navy surface layers */
  --gs-surface-0: #0C0E14;
  --gs-surface-1: #111420;
  --gs-surface-2: #171B28;
  --gs-surface-3: #1E2333;
  --gs-surface-4: #252B3E;

  /* Background tokens */
  --gs-bg-base:    #0C0E14;
  --gs-bg-subtle:  #111420;
  --gs-bg-muted:   #171B28;
  --gs-bg-emphasis:#1E2333;
  --gs-bg-inverse: #F0F2F8;
  --gs-bg-overlay: rgba(0,0,0,0.68);

  /* Translucent-white borders */
  --gs-border-subtle:  rgba(255,255,255,0.06);
  --gs-border-default: rgba(255,255,255,0.10);
  --gs-border-strong:  rgba(255,255,255,0.18);
  --gs-border-inverse: rgba(255,255,255,0.32);

  /* Text tokens */
  --gs-text-primary:   #F0F2F8;
  --gs-text-secondary: #B4BAD0;
  --gs-text-tertiary:  #717899;
  --gs-text-disabled:  #454B63;
  --gs-text-inverse:   #0C0E14;
  --gs-text-link:      #C4B5FD;
  --gs-text-link-hover:#DDD6FE;

  /* Status tokens — translucent on dark */
  --gs-status-success-bg:     rgba(74,222,128,0.10);
  --gs-status-success-border: rgba(74,222,128,0.25);
  --gs-status-success-icon:   #4ADE80;
  --gs-status-success-text:   #86EFAC;
  --gs-status-warning-bg:     rgba(252,211,77,0.10);
  --gs-status-warning-border: rgba(252,211,77,0.25);
  --gs-status-warning-icon:   #FCD34D;
  --gs-status-warning-text:   #FDE68A;
  --gs-status-error-bg:       rgba(248,113,113,0.10);
  --gs-status-error-border:   rgba(248,113,113,0.25);
  --gs-status-error-icon:     #F87171;
  --gs-status-error-text:     #FCA5A5;
  --gs-status-info-bg:        rgba(96,165,250,0.10);
  --gs-status-info-border:    rgba(96,165,250,0.25);
  --gs-status-info-icon:      #60A5FA;
  --gs-status-info-text:      #93C5FD;
  --gs-error:    #F87171;
  --gs-success:  #4ADE80;
  --gs-warning:  #FCD34D;
  --gs-info:     #60A5FA;

  /* Focus rings — 2px offset + 3px ring, higher opacity on dark */
  --gs-focus-ring:         0 0 0 2px var(--gs-surface-0), 0 0 0 4px rgba(167,139,250,0.65);
  --gs-focus-ring-error:   0 0 0 2px var(--gs-surface-0), 0 0 0 4px rgba(248,113,113,0.65);
  --gs-focus-ring-success: 0 0 0 2px var(--gs-surface-0), 0 0 0 4px rgba(74,222,128,0.55);

  /* Pure-black shadows for depth on dark surfaces */
  --gs-shadow-xs:  0 1px 2px rgba(0,0,0,0.20);
  --gs-shadow-sm:  0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --gs-shadow-md:  0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  --gs-shadow-lg:  0 10px 15px rgba(0,0,0,0.40), 0 4px 6px rgba(0,0,0,0.30);
  --gs-shadow-xl:  0 20px 25px rgba(0,0,0,0.50), 0 8px 10px rgba(0,0,0,0.35);
  --gs-shadow-2xl: 0 25px 50px rgba(0,0,0,0.70);
  --gs-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.30);
  /* Brand glow shadows — brighter on dark */
  --gs-shadow-primary:    0 4px 14px rgba(167,139,250,0.30);
  --gs-shadow-primary-lg: 0 8px 24px rgba(167,139,250,0.40);
  --gs-shadow-secondary:  0 4px 14px rgba(74,222,128,0.25);
  --gs-shadow-tertiary:   0 4px 14px rgba(96,165,250,0.25);
}

/* ============================================================
 * § 04 · TYPOGRAPHY SYSTEM
 * ============================================================ */

:root {
  --gs-font-display: 'Plus Jakarta Sans', sans-serif;
  --gs-font-body:    'DM Sans', sans-serif;
  --gs-font-mono:    'JetBrains Mono', monospace;
  --gs-font-numeric: 'Plus Jakarta Sans', sans-serif;

  --gs-weight-light:    300;
  --gs-weight-regular:  400;
  --gs-weight-medium:   500;
  --gs-weight-semibold: 600;
  --gs-weight-bold:     700;
  --gs-weight-extrabold:800;

  /* Type scale — Major Third 1.250 */
  --gs-text-2xs:  0.625rem;
  --gs-text-xs:   0.75rem;
  --gs-text-sm:   0.875rem;
  --gs-text-base: 1rem;
  --gs-text-md:   1.125rem;
  --gs-text-lg:   1.25rem;
  --gs-text-xl:   1.5rem;
  --gs-text-2xl:  1.875rem;
  --gs-text-3xl:  2.25rem;
  --gs-text-4xl:  3rem;
  --gs-text-5xl:  3.75rem;
  --gs-text-6xl:  4.5rem;

  /* Line heights */
  --gs-leading-none:    1.0;
  --gs-leading-tight:   1.2;
  --gs-leading-snug:    1.35;
  --gs-leading-normal:  1.5;
  --gs-leading-relaxed: 1.65;
  --gs-leading-loose:   1.8;
  --gs-leading-body:    1.72;  /* optimal prose reading rhythm */

  /* Letter spacing */
  --gs-tracking-tighter:  -0.04em;
  --gs-tracking-tight:    -0.02em;
  --gs-tracking-normal:    0em;
  --gs-tracking-wide:      0.02em;
  --gs-tracking-wider:     0.05em;
  --gs-tracking-widest:    0.1em;
  --gs-tracking-body:     -0.01em;   /* subtle body-text compression */
  --gs-tracking-heading:  -0.025em;  /* display heading compression */
}

/* ============================================================
 * § 05 · SPACING & SIZING SCALE
 * Base unit: 4px
 * ============================================================ */

:root {
  --gs-space-0:    0;
  --gs-space-px:   1px;
  --gs-space-0_5:  0.125rem;
  --gs-space-1:    0.25rem;
  --gs-space-1_5:  0.375rem;
  --gs-space-2:    0.5rem;
  --gs-space-2_5:  0.625rem;
  --gs-space-3:    0.75rem;
  --gs-space-4:    1rem;
  --gs-space-5:    1.25rem;
  --gs-space-6:    1.5rem;
  --gs-space-8:    2rem;
  --gs-space-10:   2.5rem;
  --gs-space-12:   3rem;
  --gs-space-16:   4rem;
  --gs-space-20:   5rem;
  --gs-space-24:   6rem;
  --gs-space-32:   8rem;

  /* Component sizing */
  --gs-btn-height-xs: 1.75rem;
  --gs-btn-height-sm: 2.25rem;
  --gs-btn-height-md: 2.75rem;
  --gs-btn-height-lg: 3.25rem;
  --gs-btn-height-xl: 3.75rem;

  --gs-input-height-sm: 2.25rem;
  --gs-input-height-md: 2.75rem;
  --gs-input-height-lg: 3.25rem;

  --gs-size-icon-xs:  0.75rem;
  --gs-size-icon-sm:  1rem;
  --gs-size-icon-md:  1.25rem;
  --gs-size-icon-lg:  1.5rem;
  --gs-size-icon-xl:  2rem;
  --gs-size-icon-2xl: 2.5rem;
  --gs-size-icon-3xl: 3rem;

  --gs-size-avatar-xs:  1.5rem;
  --gs-size-avatar-sm:  2rem;
  --gs-size-avatar-md:  2.5rem;
  --gs-size-avatar-lg:  3rem;
  --gs-size-avatar-xl:  4rem;
  --gs-size-avatar-2xl: 5rem;

  /* Layout dimensions */
  --gs-navbar-height:   4rem;
  --gs-topbar-height:   2.5rem;
  --gs-sidebar-width:   16rem;
  --gs-sidebar-collapsed: 4.5rem;
  --gs-sidebar-right:   20rem;
}

/* ============================================================
 * § 06 · GRID & LAYOUT HELPERS
 * ============================================================ */

:root {
  --gs-container-max:        75rem;
  --gs-container-narrow-max: 48rem;
  --gs-container-wide-max:   90rem;
  --gs-gutter:               1.5rem;
}

.gs-container {
  width: 100%;
  max-width: var(--gs-container-max);
  margin-inline: auto;
  padding-inline: var(--gs-gutter);
}
.gs-container-narrow {
  max-width: var(--gs-container-narrow-max);
  margin-inline: auto;
  padding-inline: var(--gs-gutter);
}
.gs-container-wide {
  width: 100%;
  max-width: var(--gs-container-wide-max);
  margin-inline: auto;
  padding-inline: var(--gs-gutter);
}
.gs-container-fluid {
  width: 100%;
  padding-inline: var(--gs-gutter);
}

/* Section spacing */
.gs-section-sm  { padding-block: var(--gs-space-10); }
.gs-section     { padding-block: var(--gs-space-16); }
.gs-section-lg  { padding-block: var(--gs-space-16); }
.gs-section-xl  { padding-block: var(--gs-space-16); }

@media (min-width: 992px) {
  :root { --gs-gutter: 2rem; }
  .gs-section     { padding-block: var(--gs-space-24); }
  .gs-section-lg  { padding-block: var(--gs-space-32); }
  .gs-section-xl  { padding-block: calc(var(--gs-space-32) * 1.5); }
}

/* CSS Grid helpers */
.gs-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gs-space-6); }
.gs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gs-space-6); }
.gs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gs-space-6); }
.gs-grid-auto    { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: var(--gs-space-6); }
.gs-grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--gs-space-4); }
.gs-grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(22.5rem, 1fr)); gap: var(--gs-space-6); }

@media (max-width: 991.98px) {
  .gs-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gs-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .gs-grid-2,
  .gs-grid-3,
  .gs-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
 * § 07 · BORDER RADIUS SYSTEM
 * ============================================================ */

:root {
  --gs-radius-none: 0;
  --gs-radius-xs:   3px;
  --gs-radius-sm:   5px;
  --gs-radius-md:   8px;
  --gs-radius-lg:   12px;
  --gs-radius-xl:   16px;
  --gs-radius-2xl:  20px;
  --gs-radius-3xl:  24px;
  --gs-radius-full: 9999px;

  /* Semantic aliases */
  --gs-radius-btn:           var(--gs-radius-md);      /* 8px  */
  --gs-radius-btn-pill:      var(--gs-radius-full);
  --gs-radius-input:         var(--gs-radius-md);      /* 8px  */
  --gs-radius-card:          var(--gs-radius-xl);      /* 16px — modern premium feel */
  --gs-radius-card-sm:       var(--gs-radius-lg);      /* 12px — compact cards */
  --gs-radius-modal:         var(--gs-radius-2xl);     /* 20px — elevated dialogs */
  --gs-radius-badge:         var(--gs-radius-sm);      /* 5px  */
  --gs-radius-tag:           var(--gs-radius-full);
  --gs-radius-tooltip:       var(--gs-radius-sm);
  --gs-radius-dropdown:      var(--gs-radius-lg);      /* 12px */
  --gs-radius-avatar:        var(--gs-radius-full);
  --gs-radius-image:         var(--gs-radius-md);      /* 8px  */
  --gs-radius-image-rounded: var(--gs-radius-xl);      /* 16px — featured images */
}

/* ============================================================
 * § 08 · Z-INDEX SYSTEM
 * ============================================================ */

:root {
  --gs-z-base:     0;
  --gs-z-raised:   10;
  --gs-z-dropdown: 100;
  --gs-z-sticky:   200;
  --gs-z-fixed:    300;
  --gs-z-sidebar:  400;
  --gs-z-navbar:   500;
  --gs-z-overlay:  600;
  --gs-z-modal:    700;
  --gs-z-popover:  800;
  --gs-z-tooltip:  900;
  --gs-z-toast:    1000;
  --gs-z-top:      9999;
}

/* ============================================================
 * § 09 · TRANSITION & ANIMATION SYSTEM
 * ============================================================ */

:root {
  --gs-duration-instant: 50ms;
  --gs-duration-fast:    100ms;
  --gs-duration-normal:  200ms;
  --gs-duration-slow:    300ms;
  --gs-duration-slower:  500ms;
  --gs-duration-slowest: 800ms;

  --gs-ease-linear:  linear;
  --gs-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --gs-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --gs-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --gs-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --gs-ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --gs-ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --gs-transition-base:   all var(--gs-duration-normal) var(--gs-ease-out);
  --gs-transition-colors: color var(--gs-duration-fast) var(--gs-ease-out),
                          background-color var(--gs-duration-fast) var(--gs-ease-out),
                          border-color var(--gs-duration-fast) var(--gs-ease-out);
  --gs-transition-shadow: box-shadow var(--gs-duration-normal) var(--gs-ease-out);
  --gs-transition-transform: transform var(--gs-duration-normal) var(--gs-ease-out);
}

/* Keyframes */
@keyframes gs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gs-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gs-fade-in-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gs-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes gs-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes gs-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes gs-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes gs-spin {
  to { transform: rotate(360deg); }
}
@keyframes gs-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(167,139,250,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(167,139,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}
@keyframes gs-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes gs-toast-shrink {
  from { width: 100%; }
  to   { width: 0%; }
}

/* Animation utility classes */
.gs-animate-fade-in     { animation: gs-fade-in     var(--gs-duration-slow)   var(--gs-ease-out)    both; }
.gs-animate-fade-in-up  { animation: gs-fade-in-up  var(--gs-duration-slow)   var(--gs-ease-out)    both; }
.gs-animate-scale-in    { animation: gs-scale-in    var(--gs-duration-normal) var(--gs-ease-spring) both; }
.gs-animate-spin        { animation: gs-spin        800ms var(--gs-ease-linear) infinite; }

/* Reduced motion — disable all animations globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
 * § 10 · GLOBAL BASE & RESET
 * ============================================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-regular);
  line-height: var(--gs-leading-normal);
  letter-spacing: var(--gs-tracking-body); /* -0.01em — subtle reading improvement */
  color: var(--gs-text-primary);
  background-color: var(--gs-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  transition: background-color var(--gs-duration-normal) var(--gs-ease-in-out),
              color var(--gs-duration-normal) var(--gs-ease-in-out);
}

/* Heading defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gs-font-display);
  color: var(--gs-text-primary);
  line-height: var(--gs-leading-tight);
  margin-top: 0;
  margin-bottom: var(--gs-space-4);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
h1 { font-size: var(--gs-text-4xl); font-weight: var(--gs-weight-extrabold); letter-spacing: var(--gs-tracking-tighter); }
h2 { font-size: var(--gs-text-3xl); font-weight: var(--gs-weight-bold);      letter-spacing: var(--gs-tracking-tight); }
h3 { font-size: var(--gs-text-2xl); font-weight: var(--gs-weight-bold);      letter-spacing: var(--gs-tracking-tight); }
h4 { font-size: var(--gs-text-xl);  font-weight: var(--gs-weight-semibold);  letter-spacing: var(--gs-tracking-normal); }
h5 { font-size: var(--gs-text-lg);  font-weight: var(--gs-weight-semibold);  letter-spacing: var(--gs-tracking-normal); }
h6 { font-size: var(--gs-text-base);font-weight: var(--gs-weight-semibold);  letter-spacing: var(--gs-tracking-normal); }

/* Display type utilities */
.gs-display-xl {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-6xl);
  font-weight: var(--gs-weight-extrabold);
  line-height: var(--gs-leading-none);
  letter-spacing: var(--gs-tracking-tighter);
}
.gs-display-lg {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-5xl);
  font-weight: var(--gs-weight-extrabold);
  line-height: var(--gs-leading-tight);
  letter-spacing: var(--gs-tracking-tighter);
}

/* Text utility classes */
.gs-text-lead    { font-size: var(--gs-text-md);  line-height: var(--gs-leading-relaxed); color: var(--gs-text-secondary); }
.gs-text-body    { font-size: var(--gs-text-base); line-height: var(--gs-leading-normal); }
.gs-text-small   { font-size: var(--gs-text-sm);  line-height: var(--gs-leading-normal); color: var(--gs-text-secondary); }
.gs-text-caption { font-size: var(--gs-text-xs);  line-height: var(--gs-leading-snug);   color: var(--gs-text-tertiary); }
.gs-text-label   { font-size: var(--gs-text-xs);  font-weight: var(--gs-weight-semibold); letter-spacing: var(--gs-tracking-wider); text-transform: uppercase; color: var(--gs-text-tertiary); }
.gs-text-mono    { font-family: var(--gs-font-mono); font-size: var(--gs-text-sm); }
.gs-text-numeric { font-family: var(--gs-font-numeric); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.gs-prose        { max-width: 65ch; line-height: var(--gs-leading-relaxed); }

/* Section heading pattern */
.gs-section-label {
  display: block;
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-semibold);
  letter-spacing: var(--gs-tracking-wider);
  text-transform: uppercase;
  color: var(--gs-cp-t);
  margin-bottom: var(--gs-space-2);
}
.gs-section-heading {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-3xl);
  font-weight: var(--gs-weight-bold);
  letter-spacing: var(--gs-tracking-tight);
  color: var(--gs-text-primary);
  margin-bottom: var(--gs-space-4);
}

/* Links */
a {
  color: var(--gs-text-link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--gs-duration-fast) var(--gs-ease-out);
}
a:hover { color: var(--gs-text-link-hover); text-decoration: underline; text-decoration-thickness: 1px; }

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

/* Lists */
ul, ol { padding-left: var(--gs-space-6); margin-bottom: var(--gs-space-4); }
li { margin-bottom: var(--gs-space-1); }

/* Reset lists when used in nav */
nav ul, nav ol { list-style: none; padding: 0; margin: 0; }

/* HR */
hr {
  border: 0;
  border-top: 1px solid var(--gs-border-subtle);
  margin-block: var(--gs-space-6);
}

/* Code / Pre */
code {
  font-family: var(--gs-font-mono);
  font-size: 0.875em;
  background: var(--gs-bg-muted);
  color: var(--gs-cp-t);
  padding: 0.125em 0.375em;
  border-radius: var(--gs-radius-xs);
}
pre {
  font-family: var(--gs-font-mono);
  font-size: var(--gs-text-sm);
  background: var(--gs-surface-2);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-md);
  padding: var(--gs-space-5);
  overflow-x: auto;
  margin-bottom: var(--gs-space-4);
}
pre code { background: none; padding: 0; color: inherit; }

/* Blockquote */
blockquote {
  border-left: 4px solid var(--gs-cp-b);
  padding-left: var(--gs-space-5);
  margin-left: 0;
  color: var(--gs-text-secondary);
  font-style: italic;
}

/* Strong */
strong, b { font-weight: var(--gs-weight-semibold); }

/* Icon size utilities */
.gs-icon-xs  { font-size: var(--gs-size-icon-xs);  width: var(--gs-size-icon-xs);  height: var(--gs-size-icon-xs); }
.gs-icon-sm  { font-size: var(--gs-size-icon-sm);  width: var(--gs-size-icon-sm);  height: var(--gs-size-icon-sm); }
.gs-icon-md  { font-size: var(--gs-size-icon-md);  width: var(--gs-size-icon-md);  height: var(--gs-size-icon-md); }
.gs-icon-lg  { font-size: var(--gs-size-icon-lg);  width: var(--gs-size-icon-lg);  height: var(--gs-size-icon-lg); }
.gs-icon-xl  { font-size: var(--gs-size-icon-xl);  width: var(--gs-size-icon-xl);  height: var(--gs-size-icon-xl); }
.gs-icon-2xl { font-size: var(--gs-size-icon-2xl); width: var(--gs-size-icon-2xl); height: var(--gs-size-icon-2xl); }
.gs-icon-3xl { font-size: var(--gs-size-icon-3xl); width: var(--gs-size-icon-3xl); height: var(--gs-size-icon-3xl); }

/* Icon color utilities */
.gs-icon-primary   { color: var(--gs-cp); }
.gs-icon-secondary { color: var(--gs-cs); }
.gs-icon-tertiary  { color: var(--gs-ct); }
.gs-icon-muted     { color: var(--gs-text-tertiary); }
.gs-icon-inverse   { color: var(--gs-text-inverse); }
.gs-icon-success   { color: var(--gs-status-success-icon); }
.gs-icon-warning   { color: var(--gs-status-warning-icon); }
.gs-icon-error     { color: var(--gs-status-error-icon); }

/* Icon box containers */
.gs-icon-box,
.gs-icon-box-sm,
.gs-icon-box-lg,
.gs-icon-box-xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gs-radius-md);
  flex-shrink: 0;
}
.gs-icon-box-sm  { width: 2rem;    height: 2rem;    font-size: var(--gs-size-icon-sm); }
.gs-icon-box     { width: 2.75rem; height: 2.75rem; font-size: var(--gs-size-icon-lg); }
.gs-icon-box-lg  { width: 3.5rem;  height: 3.5rem;  font-size: var(--gs-size-icon-xl); }
.gs-icon-box-xl  { width: 4.5rem;  height: 4.5rem;  font-size: var(--gs-size-icon-2xl); }
.gs-icon-box-round { border-radius: var(--gs-radius-avatar); }

.gs-icon-box-primary   { background: var(--gs-cp-m);  color: var(--gs-cp); }
.gs-icon-box-secondary { background: var(--gs-cs-m);  color: var(--gs-cs); }
.gs-icon-box-tertiary  { background: var(--gs-ct-s);  color: var(--gs-ct); }
.gs-icon-box-success   { background: var(--gs-status-success-bg); color: var(--gs-status-success-icon); }
.gs-icon-box-warning   { background: var(--gs-status-warning-bg); color: var(--gs-status-warning-icon); }
.gs-icon-box-error     { background: var(--gs-status-error-bg);   color: var(--gs-status-error-icon); }

/* Mobile heading scale */
@media (max-width: 575.98px) {
  h1 { font-size: var(--gs-text-3xl); }
  h2 { font-size: var(--gs-text-2xl); }
  h3 { font-size: var(--gs-text-xl); }
  .gs-display-xl { font-size: var(--gs-text-4xl); }
  .gs-display-lg { font-size: var(--gs-text-3xl); }
  .gs-section-heading { font-size: var(--gs-text-2xl); }
}


/* ============================================================
 * § 11 · gs-btn — BUTTON SYSTEM
 * ============================================================ */

.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gs-space-2); /* 8px — improved icon/label alignment */
  height: var(--gs-btn-height-md);
  padding-inline: var(--gs-space-5);
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-semibold);
  line-height: 1;
  letter-spacing: var(--gs-tracking-wide);
  white-space: nowrap;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--gs-radius-btn);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition: background-color var(--gs-duration-fast) var(--gs-ease-out),
              border-color var(--gs-duration-fast) var(--gs-ease-out),
              color var(--gs-duration-fast) var(--gs-ease-out),
              box-shadow var(--gs-duration-normal) var(--gs-ease-out),
              transform var(--gs-duration-fast) var(--gs-ease-out),
              opacity var(--gs-duration-fast) var(--gs-ease-out);
  position: relative;
  /* 44px touch target via pseudo-element */
  isolation: isolate;
}
.gs-btn::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
}
.gs-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--gs-focus-ring); }
.gs-btn:active { transform: translateY(1px); }
.gs-btn:disabled,
.gs-btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; pointer-events: none; }
.gs-btn.gs-btn-loading { opacity: 0.7; pointer-events: none; cursor: wait; }

/* Sizes */
.gs-btn-xs { height: var(--gs-btn-height-xs); padding-inline: 0.75rem; font-size: var(--gs-text-xs);  gap: var(--gs-space-1);   }
.gs-btn-sm { height: var(--gs-btn-height-sm); padding-inline: 1rem;    font-size: var(--gs-text-sm);  gap: var(--gs-space-1_5); }
.gs-btn-lg { height: var(--gs-btn-height-lg); padding-inline: 1.5rem;  font-size: var(--gs-text-base);gap: var(--gs-space-2);   }
.gs-btn-xl { height: var(--gs-btn-height-xl); padding-inline: 2rem;    font-size: var(--gs-text-md);  gap: var(--gs-space-2_5); }

/* Modifiers */
.gs-btn-pill  { border-radius: var(--gs-radius-full); }
.gs-btn-block { width: 100%; }
.gs-btn-icon  { padding-inline: 0; width: var(--gs-btn-height-md); aspect-ratio: 1; }
.gs-btn-icon.gs-btn-xs { width: var(--gs-btn-height-xs); }
.gs-btn-icon.gs-btn-sm { width: var(--gs-btn-height-sm); }
.gs-btn-icon.gs-btn-lg { width: var(--gs-btn-height-lg); }
.gs-btn-icon.gs-btn-xl { width: var(--gs-btn-height-xl); }

/* Spinner */
.gs-btn-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: gs-spin 600ms linear infinite;
  flex-shrink: 0;
}

/* Button Group */
.gs-btn-group {
  display: inline-flex;
  gap: 0;
}
.gs-btn-group .gs-btn { border-radius: 0; }
.gs-btn-group .gs-btn:first-child { border-radius: var(--gs-radius-btn) 0 0 var(--gs-radius-btn); }
.gs-btn-group .gs-btn:last-child  { border-radius: 0 var(--gs-radius-btn) var(--gs-radius-btn) 0; }

/* ---------- Variant: primary ---------- */
.gs-btn-primary {
  background: var(--gs-purple-800);
  border-color: var(--gs-purple-800);
  color: #fff;
}
.gs-btn-primary:hover:not(:disabled) {
  background: var(--gs-purple-700);
  border-color: var(--gs-purple-700);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.gs-btn-primary:active:not(:disabled) {
  background: var(--gs-purple-900);
  border-color: var(--gs-purple-900);
  box-shadow: var(--gs-shadow-sm);
  transform: translateY(1px);
}
[data-theme="dark"] .gs-btn-primary {
  background: var(--gs-purple-600);
  border-color: var(--gs-purple-600);
  color: #fff;
}
[data-theme="dark"] .gs-btn-primary:hover:not(:disabled) {
  background: var(--gs-purple-500);
  border-color: var(--gs-purple-500);
}

/* ---------- Variant: secondary ---------- */
.gs-btn-secondary {
  background: var(--gs-green-700);
  border-color: var(--gs-green-700);
  color: #fff;
  box-shadow: var(--gs-shadow-secondary);
}
.gs-btn-secondary:hover:not(:disabled) {
  background: var(--gs-green-800);
  border-color: var(--gs-green-800);
  box-shadow: 0 8px 20px rgba(61,139,55,0.40);
  color: #fff;
  text-decoration: none;
}

/* ---------- Variant: tertiary ---------- */
.gs-btn-tertiary {
  background: var(--gs-blue-700);
  border-color: var(--gs-blue-700);
  color: #fff;
  box-shadow: var(--gs-shadow-tertiary);
}
.gs-btn-tertiary:hover:not(:disabled) {
  background: var(--gs-blue-800);
  border-color: var(--gs-blue-800);
  color: #fff;
  text-decoration: none;
}

/* ---------- Variant: outline ---------- */
.gs-btn-outline {
  background: transparent;
  border-color: var(--gs-cp);
  color: var(--gs-cp-t);
}
.gs-btn-outline:hover:not(:disabled) {
  background: var(--gs-cp-s);
  text-decoration: none;
  color: var(--gs-cp-t);
}

/* ---------- Variant: outline-secondary ---------- */
.gs-btn-outline-secondary {
  background: transparent;
  border-color: var(--gs-cs);
  color: var(--gs-cs);
}
.gs-btn-outline-secondary:hover:not(:disabled) {
  background: var(--gs-cs-s);
  color: var(--gs-cs);
  text-decoration: none;
}

/* ---------- Variant: ghost ---------- */
.gs-btn-ghost {
    background: transparent;
    border-color: var(--gs-bd1);
    color: var(--gs-tx1);
}
.gs-btn-ghost:hover:not(:disabled) {
  background: var(--gs-bg-muted);
  color: var(--gs-text-primary);
  text-decoration: none;
}

/* ---------- Variant: subtle ---------- */
.gs-btn-subtle {
  background: var(--gs-bg-muted);
  border-color: var(--gs-border-default);
  color: var(--gs-text-secondary);
}
.gs-btn-subtle:hover:not(:disabled) {
  background: var(--gs-bg-emphasis);
  border-color: var(--gs-border-strong);
  color: var(--gs-text-primary);
  text-decoration: none;
}

/* ---------- Variant: danger ---------- */
.gs-btn-danger {
  background: var(--gs-status-error-icon);
  border-color: var(--gs-status-error-icon);
  color: #fff;
}
.gs-btn-danger:hover:not(:disabled) {
  background: #B91C1C;
  border-color: #B91C1C;
  color: #fff;
  text-decoration: none;
}

/* ---------- Variant: success ---------- */
.gs-btn-success {
  background: var(--gs-status-success-icon);
  border-color: var(--gs-status-success-icon);
  color: #fff;
}
.gs-btn-success:hover:not(:disabled) {
  background: var(--gs-green-800);
  border-color: var(--gs-green-800);
  color: #fff;
  text-decoration: none;
}

/* ---------- Variant: link ---------- */
.gs-btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--gs-text-link);
  height: auto;
  padding-inline: 0;
  text-decoration: none;
}
.gs-btn-link:hover:not(:disabled) {
  color: var(--gs-text-link-hover);
  text-decoration: underline;
}


/* ============================================================
 * § 12 · gs-form — FORM CONTROLS
 * ============================================================ */

.gs-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--gs-space-1_5);
  margin-bottom: var(--gs-space-5);
}

.gs-label {
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-text-primary);
  line-height: var(--gs-leading-snug);
  font-family: var(--gs-font-display);
}
.gs-label-required::after { content: ' *'; color: var(--gs-status-error-icon); }
.gs-label-optional::after { content: ' (optional)'; font-weight: var(--gs-weight-regular); color: var(--gs-text-tertiary); }

/* Base input / select / textarea */
.gs-input,
.gs-select,
.gs-textarea {
  width: 100%;
  height: var(--gs-input-height-md);
  padding-inline: var(--gs-space-4);
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-regular);
  line-height: var(--gs-leading-normal);
  color: var(--gs-text-primary);
  background-color: var(--gs-surface-1);
  border: 1.5px solid var(--gs-border-strong);
  border-radius: var(--gs-radius-input);
  box-shadow: var(--gs-shadow-xs);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: border-color var(--gs-duration-fast) var(--gs-ease-out),
              box-shadow var(--gs-duration-normal) var(--gs-ease-out),
              background-color var(--gs-duration-fast) var(--gs-ease-out);
  appearance: none;
  -webkit-appearance: none;
}
/* Prevent iOS zoom on focus */
@media (max-width: 767.98px) {
  .gs-input, .gs-select, .gs-textarea { font-size: max(var(--gs-text-sm), 16px); }
}
.gs-input:hover:not(:disabled),
.gs-select:hover:not(:disabled),
.gs-textarea:hover:not(:disabled) {
  border-color: var(--gs-cp-b);
  background-color: var(--gs-surface-0);
}
.gs-input:focus,
.gs-select:focus,
.gs-textarea:focus {
  border-color: var(--gs-cp);
  box-shadow: var(--gs-shadow-xs), var(--gs-focus-ring);
  background-color: var(--gs-surface-0);
  outline-color: transparent;
}
.gs-input::placeholder,
.gs-textarea::placeholder { color: var(--gs-text-tertiary); opacity: 0.7; }
.gs-input:disabled,
.gs-select:disabled,
.gs-textarea:disabled {
  background-color: var(--gs-bg-muted);
  color: var(--gs-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}
.gs-input-error .gs-input,
.gs-input.gs-input-error,
.gs-select.gs-input-error { border-color: var(--gs-status-error-icon); background-color: var(--gs-status-error-bg); }
.gs-input-error .gs-input:focus,
.gs-input.gs-input-error:focus,
.gs-select.gs-input-error:focus { box-shadow: var(--gs-shadow-xs), var(--gs-focus-ring-error); }
.gs-input-success .gs-input,
.gs-input.gs-input-success { border-color: var(--gs-status-success-icon); }
.gs-input.gs-input-success:focus { box-shadow: var(--gs-shadow-xs), var(--gs-focus-ring-success); }

/* Input sizes */
.gs-input-sm { height: var(--gs-input-height-sm); padding-inline: var(--gs-space-3); font-size: var(--gs-text-xs); }
.gs-input-lg { height: var(--gs-input-height-lg); padding-inline: var(--gs-space-5); font-size: var(--gs-text-base); }

/* Textarea */
.gs-textarea {
  height: auto;
  min-height: 6rem;
  padding-block: var(--gs-space-3);
  resize: vertical;
}

/* Select */
.gs-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--gs-space-3) center;
  padding-right: var(--gs-space-10);
  cursor: pointer;
}
[data-theme="dark"] .gs-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23B4BAD0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* Input group */
.gs-input-group {
  display: flex;
  align-items: stretch;
}
.gs-input-group .gs-input {
  flex: 1;
  min-width: 0;
}
.gs-input-group-prepend,
.gs-input-group-append {
  display: flex;
  align-items: center;
  padding-inline: var(--gs-space-3);
  background: var(--gs-bg-muted);
  border: 1.5px solid var(--gs-border-strong);
  color: var(--gs-text-tertiary);
  font-size: var(--gs-text-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.gs-input-group-prepend {
  border-right: 0;
  border-radius: var(--gs-radius-input) 0 0 var(--gs-radius-input);
}
.gs-input-group-append {
  border-left: 0;
  border-radius: 0 var(--gs-radius-input) var(--gs-radius-input) 0;
}
.gs-input-group .gs-input:not(:first-child) { border-left: 0; border-radius: 0 var(--gs-radius-input) var(--gs-radius-input) 0; }
.gs-input-group .gs-input:not(:last-child)  { border-right: 0; border-radius: var(--gs-radius-input) 0 0 var(--gs-radius-input); }

/* Input with icon */
.gs-input-wrap { position: relative; }
.gs-input-icon-left,
.gs-input-icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gs-text-tertiary);
  pointer-events: none;
  font-size: var(--gs-size-icon-md);
  line-height: 1;
}
.gs-input-icon-left  { left:  var(--gs-space-3); }
.gs-input-icon-right { right: var(--gs-space-3); }
.gs-input-wrap .gs-input.has-icon-left  { padding-left:  calc(var(--gs-space-3) * 2 + var(--gs-size-icon-md)); }
.gs-input-wrap .gs-input.has-icon-right { padding-right: calc(var(--gs-space-3) * 2 + var(--gs-size-icon-md)); }

/* Helper / error / success text */
.gs-form-helper  { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); line-height: var(--gs-leading-snug); }
.gs-form-error   { font-size: var(--gs-text-xs); color: var(--gs-status-error-icon); line-height: var(--gs-leading-snug); }
.gs-form-success { font-size: var(--gs-text-xs); color: var(--gs-status-success-icon); line-height: var(--gs-leading-snug); }

/* Checkbox */
.gs-check-group { display: flex; flex-direction: column; gap: var(--gs-space-2); }
.gs-check-item  { display: flex; align-items: flex-start; gap: var(--gs-space-2_5); cursor: pointer; }
.gs-check {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  border: 1.5px solid var(--gs-border-strong);
  border-radius: var(--gs-radius-xs);
  background: var(--gs-surface-1);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: var(--gs-transition-colors);
  position: relative;
}
.gs-check:checked {
  background: var(--gs-cp);
  border-color: var(--gs-cp);
  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='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.gs-check:focus-visible { box-shadow: var(--gs-focus-ring); outline: none; }
.gs-check-label { font-size: var(--gs-text-sm); color: var(--gs-text-secondary); line-height: var(--gs-leading-snug); cursor: pointer; }

/* Radio */
.gs-radio-group { display: flex; flex-direction: column; gap: var(--gs-space-2); }
.gs-radio-item  { display: flex; align-items: flex-start; gap: var(--gs-space-2_5); cursor: pointer; }
.gs-radio {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  border: 1.5px solid var(--gs-border-strong);
  border-radius: var(--gs-radius-full);
  background: var(--gs-surface-1);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: var(--gs-transition-colors);
}
.gs-radio:checked {
  border-color: var(--gs-cp);
  background: radial-gradient(circle, var(--gs-cp) 40%, transparent 45%);
  background-color: var(--gs-surface-1);
}
.gs-radio:focus-visible { box-shadow: var(--gs-focus-ring); outline: none; }

/* Toggle switch */
.gs-toggle-wrap { display: flex; align-items: center; gap: var(--gs-space-2_5); cursor: pointer; }
.gs-toggle-track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--gs-radius-full);
  background: var(--gs-border-strong);
  transition: background-color var(--gs-duration-normal) var(--gs-ease-spring);
  flex-shrink: 0;
}
.gs-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gs-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--gs-radius-full);
  background: #fff;
  box-shadow: var(--gs-shadow-sm);
  transition: transform var(--gs-duration-normal) var(--gs-ease-spring);
}
.gs-toggle-input:checked ~ .gs-toggle-thumb { transform: translateX(1.25rem); }
.gs-toggle-input:checked + .gs-toggle-track,
.gs-toggle-wrap.active .gs-toggle-track { background: var(--gs-cp); }
.gs-toggle-input:focus-visible + .gs-toggle-track { box-shadow: var(--gs-focus-ring); }
.gs-toggle-label { font-size: var(--gs-text-sm); color: var(--gs-text-secondary); }


/* ============================================================
 * § 13 · gs-card — CARD SYSTEM
 * Variants: default, flat, bordered, elevated, interactive,
 *           primary, stat (KPI), tool, media
 * Sizes: sm (default) lg
 * ============================================================ */

.gs-card {
  background: var(--gs-surface-1);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-card);
  box-shadow: var(--gs-shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--gs-duration-normal) var(--gs-ease-out),
              border-color var(--gs-duration-normal) var(--gs-ease-out),
              transform var(--gs-duration-normal) var(--gs-ease-out);
}

.gs-card-header {
  padding: var(--gs-space-5) var(--gs-space-6) var(--gs-space-4);
  border-bottom: 1px solid var(--gs-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gs-space-3);
  flex-shrink: 0;
}
.gs-card-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
}
.gs-card-body   { padding: var(--gs-space-6); flex: 1; }
.gs-card-footer {
  padding: var(--gs-space-4) var(--gs-space-6);
  border-top: 1px solid var(--gs-border-subtle);
  background: var(--gs-surface-2);
  flex-shrink: 0;
}

/* Sizes */
.gs-card-sm .gs-card-body   { padding: var(--gs-space-4); }
.gs-card-sm .gs-card-header,
.gs-card-sm .gs-card-footer { padding: var(--gs-space-3) var(--gs-space-4); }
.gs-card-sm                 { border-radius: var(--gs-radius-card-sm); } /* 12px */
.gs-card-lg .gs-card-body   { padding: var(--gs-space-8); }
.gs-card-lg .gs-card-header,
.gs-card-lg .gs-card-footer { padding: var(--gs-space-6) var(--gs-space-8); }
.gs-card-lg                 { border-radius: var(--gs-radius-2xl); }

/* Variants */
.gs-card-flat {
  background: var(--gs-surface-2);
  border-color: transparent;
  box-shadow: none;
}
.gs-card-bordered {
  border-color: var(--gs-border-strong);
  box-shadow: none;
}
.gs-card-elevated {
  background: var(--gs-surface-0);
  border-color: transparent;
  box-shadow: var(--gs-shadow-lg);
}
.gs-card-primary {
  border-color: var(--gs-cp-b);
  border-top: 3px solid var(--gs-cp);
}
.gs-card-interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.gs-card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--gs-shadow-xl);
  border-color: var(--gs-cp-b);
  text-decoration: none;
  color: inherit;
}
.gs-card-interactive:active { transform: translateY(0); box-shadow: var(--gs-shadow-md); }
.gs-card-interactive:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--gs-focus-ring), var(--gs-shadow-md); }
@media (hover: none) { .gs-card-interactive:hover { transform: none; box-shadow: var(--gs-shadow-sm); } }

/* Card media */
.gs-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.gs-card-media-sq   { aspect-ratio: 1; }
.gs-card-media-wide { aspect-ratio: 21 / 9; }

/* Stat / KPI card */
.gs-card-stat {
  background: var(--gs-surface-1);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-card);
  box-shadow: var(--gs-shadow-xs);
  padding: var(--gs-space-5) var(--gs-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gs-space-1_5);
}
.gs-card-stat-label {
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-wider);
  color: var(--gs-text-tertiary);
}
.gs-card-stat-value {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-3xl);
  font-weight: var(--gs-weight-extrabold);
  color: var(--gs-text-primary);
  line-height: 1;
  letter-spacing: var(--gs-tracking-tighter);
  font-variant-numeric: tabular-nums;
}
.gs-card-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-space-1);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-semibold);
}
.gs-card-stat-delta-up   { color: var(--gs-status-success-icon); }
.gs-card-stat-delta-down { color: var(--gs-status-error-icon);   }
.gs-card-stat-delta-nt   { color: var(--gs-text-tertiary);        }


/* ============================================================
 * § 14 · gs-table — TABLE SYSTEM
 * ============================================================ */

.gs-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-card);
  background: var(--gs-surface-1);
  box-shadow: var(--gs-shadow-sm);
}

.gs-table {
  width: 100%;
  min-width: 37.5rem; /* 600px — forces scroll on mobile */
  border-collapse: collapse;
  font-size: var(--gs-text-sm);
}

.gs-table thead th {
  padding: var(--gs-space-3) var(--gs-space-5);
  background: var(--gs-surface-2);
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-wider);
  color: var(--gs-text-tertiary);
  border-bottom: 2px solid var(--gs-border-default);
  text-align: left;
  white-space: nowrap;
}
.gs-table thead th:first-child { border-radius: var(--gs-radius-card) 0 0 0; }
.gs-table thead th:last-child  { border-radius: 0 var(--gs-radius-card) 0 0; }

.gs-table tbody tr {
  border-bottom: 1px solid var(--gs-border-subtle);
  transition: background var(--gs-duration-fast) var(--gs-ease-out);
}
.gs-table tbody tr:last-child { border-bottom: none; }
.gs-table tbody tr:hover      { background: var(--gs-surface-2); }
.gs-table tbody tr.selected   { background: var(--gs-cp-s); }
.gs-table tbody tr.selected td:first-child { border-left: 2px solid var(--gs-cp); }

.gs-table tbody td {
  padding: var(--gs-space-4) var(--gs-space-5);
  color: var(--gs-text-secondary);
  vertical-align: middle;
}

.gs-table tfoot td {
  padding: var(--gs-space-3) var(--gs-space-5);
  background: var(--gs-surface-2);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-text-primary);
  border-top: 2px solid var(--gs-border-default);
}

/* Variants */
.gs-table-striped tbody tr:nth-child(even) { background: var(--gs-surface-2); }
.gs-table-sortable thead th { cursor: pointer; user-select: none; }
.gs-table-sortable thead th:hover { background: var(--gs-bg-emphasis); color: var(--gs-text-primary); }
.gs-table-sortable thead th[aria-sort="ascending"]::after  { content: " ↑"; color: var(--gs-cp); }
.gs-table-sortable thead th[aria-sort="descending"]::after { content: " ↓"; color: var(--gs-cp); }
.gs-table-dense tbody td,
.gs-table-dense thead th { padding-block: var(--gs-space-2); font-size: var(--gs-text-xs); }

/* Comparison */
.gs-table-compare tbody td            { text-align: center; }
.gs-table-compare tbody td:first-child{ text-align: left; font-weight: var(--gs-weight-medium); color: var(--gs-text-primary); }
.gs-table-compare thead th:not(:first-child) { text-align: center; }
.gs-table-col-highlight { background: var(--gs-cp-s) !important; border-top: 2px solid var(--gs-cp) !important; color: var(--gs-cp-t) !important; }
.gs-table-check-yes     { color: var(--gs-status-success-icon); font-size: var(--gs-size-icon-md); }
.gs-table-check-no      { color: var(--gs-text-disabled);       font-size: var(--gs-size-icon-md); }
.gs-table-check-partial { color: var(--gs-status-warning-icon); font-size: var(--gs-size-icon-md); }

/* Column alignment */
.gs-table th.right, .gs-table td.right  { text-align: right; }
.gs-table th.center, .gs-table td.center{ text-align: center; }

/* Pagination controls */
.gs-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gs-space-4) var(--gs-space-5);
  border-top: 1px solid var(--gs-border-subtle);
  flex-wrap: wrap;
  gap: var(--gs-space-3);
  background: var(--gs-surface-1);
}
.gs-pagination      { display: flex; align-items: center; gap: var(--gs-space-1); }
.gs-pagination-info { font-size: var(--gs-text-sm); color: var(--gs-text-tertiary); }
.gs-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: var(--gs-space-2);
  border: 1.5px solid var(--gs-border-default);
  border-radius: var(--gs-radius-md);
  background: var(--gs-surface-1);
  font-size: var(--gs-text-sm);
  font-family: var(--gs-font-display);
  font-weight: var(--gs-weight-medium);
  color: var(--gs-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: var(--gs-transition-colors);
  line-height: 1;
}
.gs-page-btn:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); text-decoration: none; }
.gs-page-btn.active,
.gs-page-btn[aria-current="page"] {
  background: var(--gs-cp);
  border-color: var(--gs-cp);
  color: var(--gs-cp-fg);
  font-weight: var(--gs-weight-bold);
}
.gs-page-btn:disabled,
.gs-page-btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; pointer-events: none; }
.gs-page-btn:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); }


/* ============================================================
 * § 15 · gs-navbar — NAVIGATION BAR
 * ============================================================ */

.gs-navbar {
  position: sticky;
  top: 0;
  z-index: var(--gs-z-navbar);
  height: var(--gs-size-avatar-2xl);
  background: var(--gs-surface-0);
  border-bottom: 1px solid var(--gs-border-subtle);
  box-shadow: var(--gs-shadow-sm);
  display: flex;
  align-items: center;
  padding-inline: var(--gs-space-6);
  gap: var(--gs-space-4);
  transition: background var(--gs-duration-slow) var(--gs-ease-out),
              box-shadow var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-navbar.scrolled {
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--gs-shadow-md);
}
[data-theme="dark"] .gs-navbar.scrolled {
  background: rgba(12,14,20,0.92);
}

/* Brand */
.gs-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  text-decoration: none;
  flex-shrink: 0;
}
.gs-nav-brand:hover { text-decoration: none; }
.gs-nav-brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--gs-purple-800), var(--gs-green-700));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gs-nav-brand-name {
  font-family: var(--gs-font-display);
  font-size: 1.125rem;
  font-weight: var(--gs-weight-extrabold);
  color: var(--gs-text-primary);
  letter-spacing: var(--gs-tracking-tight);
  line-height: 1;
}
.gs-nav-brand-name .dot { color: var(--gs-cs); }

/* Primary nav */
.gs-navbar-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.gs-nav-link {
  display: flex;
  align-items: center;
  padding-inline: var(--gs-space-3);
  height: 100%;
  font-weight: var(--gs-weight-medium);
  color: var(--gs-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--gs-duration-fast) var(--gs-ease-out),
              border-color var(--gs-duration-fast) var(--gs-ease-out);
  gap: var(--gs-space-1_5);
}
.gs-nav-link:hover { color: var(--gs-text-primary); text-decoration: none; }
.gs-nav-link.active,
.gs-nav-link[aria-current="page"] { color: var(--gs-cp); border-bottom-color: var(--gs-cp); }
.gs-nav-link:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); border-radius: var(--gs-radius-xs); }

/* Search slot */
.gs-navbar-search { flex: 1; max-width: 28rem; }

/* Right actions */
.gs-navbar-actions { display: flex; align-items: center; gap: var(--gs-space-2); flex-shrink: 0; margin-left: auto; }

/* Icon action button */
.gs-nav-icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-md);
  color: var(--gs-text-secondary);
  cursor: pointer;
  font-size: var(--gs-size-icon-md);
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  transition: var(--gs-transition-colors);
}
.gs-nav-icon-btn:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); text-decoration: none; }
.gs-nav-icon-btn:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); }

/* Notification dot */
.gs-notif-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gs-status-error-icon);
  border: 2px solid var(--gs-surface-0);
  pointer-events: none;
}

/* Nav avatar */
.gs-nav-avatar {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gs-purple-800), var(--gs-purple-600));
  color: #fff;
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: border-color var(--gs-duration-fast);
  overflow: hidden;
}
.gs-nav-avatar:hover { border-color: var(--gs-cp-b); }
.gs-nav-avatar img   { width: 100%; height: 100%; object-fit: cover; }

/* Hamburger (mobile) */
.gs-navbar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  background: none;
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-md);
  color: var(--gs-text-secondary);
  cursor: pointer;
  font-size: var(--gs-size-icon-lg);
  flex-shrink: 0;
  transition: var(--gs-transition-colors);
}
.gs-navbar-hamburger:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); }
.gs-navbar-hamburger:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); }

@media (max-width: 991.98px) {
  .gs-navbar-hamburger { display: flex; }
  .gs-navbar-nav,
  .gs-navbar-search { display: none; }
}
@media (max-width: 575.98px) {
  .gs-navbar { padding-inline: var(--gs-space-4); gap: var(--gs-space-3); }
}


/* ============================================================
 * § 16 · gs-topbar — ANNOUNCEMENT BAR
 * ============================================================ */

.gs-topbar {
  height: var(--gs-topbar-height);
  background: var(--gs-purple-800);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gs-space-6);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-medium);
  letter-spacing: var(--gs-tracking-wide);
  position: relative;
  z-index: var(--gs-z-navbar);
  text-align: center;
}
.gs-topbar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.gs-topbar a:hover { color: var(--gs-purple-200); }
.gs-topbar-close {
  position: absolute;
  right: var(--gs-space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  font-size: var(--gs-size-icon-md);
  padding: var(--gs-space-1);
  line-height: 1;
  transition: color var(--gs-duration-fast);
}
.gs-topbar-close:hover { color: #fff; }


/* ============================================================
 * § 17 · gs-mega-menu — MEGA MENU & MOBILE DRAWER
 * ============================================================ */

.gs-mega-menu {
    position: fixed;
    top: calc(var(--gs-navbar-height) + var(--gs-topbar-real, 0px));
    right: 0;
    z-index: var(--gs-z-dropdown);
    background: var(--gs-surface-0);
    box-shadow: var(--gs-shadow-xl);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gs-duration-normal) var(--gs-ease-out), transform var(--gs-duration-normal) var(--gs-ease-out);
    left: 50%;
    width: min(calc(100vw - 2rem), 1100px);
    border-radius: 0 0 14px 14px;
    border: 1px solid var(--gs-bd0);
	transform: translateX(-50%) translateY(-8px);
	margin-top:15px;
}
.gs-mega-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.gs-mega-menu-inner {
  display: flex;
  max-height: calc(100vh - var(--gs-navbar-height) - var(--gs-topbar-real, 0px) - 2rem);
  overflow: hidden;
  max-width: var(--gs-container-max);
  margin: 0 auto;
  padding: 0 !important;
  align-items: stretch;  
}

/* Zone A — category sidebar */
.gs-mega-cats {
  width: 15rem;
  flex-shrink: 0;
  background: var(--gs-surface-2);
  border-right: 1px solid var(--gs-border-subtle);
  padding: var(--gs-space-4) var(--gs-space-2);
  overflow-y: auto;
}
.gs-mega-cat-item {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2_5);
  padding: var(--gs-space-2_5) var(--gs-space-3);
  border-radius: var(--gs-radius-md);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-medium);
  color: var(--gs-text-secondary);
  cursor: pointer;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: var(--gs-transition-colors);
}
.gs-mega-cat-item:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); text-decoration: none; }
.gs-mega-cat-item.active {
  background: var(--gs-cp-s);
  color: var(--gs-cp-t);
  border-left-color: var(--gs-cp);
  font-weight: var(--gs-weight-semibold);
}

/* Zone B — subcategory content */
.gs-mega-content { flex: 1; min-width: 0; padding: var(--gs-space-5) var(--gs-space-6); overflow-y: auto; }
.gs-mega-panel   { display: none; }
.gs-mega-panel.active { display: block !important; }
.gs-mega-subcats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gs-space-1);
}
.gs-mega-subcat-link {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  padding: var(--gs-space-2) var(--gs-space-3);
  border-radius: var(--gs-radius-md);
  font-size: var(--gs-text-sm);
  color: var(--gs-text-secondary);
  text-decoration: none;
  transition: var(--gs-transition-colors);
  font-weight:600;
}
.gs-mega-subcat-link:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); text-decoration: none; }

/* Zone C — featured tools */
.gs-mega-featured {
  width: 18rem;
  flex-shrink: 0;
  border-left: 1px solid var(--gs-border-subtle);
  background: var(--gs-surface-2);
  padding: var(--gs-space-5) var(--gs-space-4);
  overflow-y: auto;
}
.gs-mega-featured-title {
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-wider);
  color: var(--gs-text-tertiary);
  margin-bottom: var(--gs-space-3);
}
.gs-mega-tool-item {
  display: flex;
  align-items: center;
  gap: var(--gs-space-3);
  padding: var(--gs-space-2_5) var(--gs-space-2);
  border-radius: var(--gs-radius-md);
  text-decoration: none;
  transition: background var(--gs-duration-fast);
  margin-bottom: var(--gs-space-1);
}
.gs-mega-tool-item:hover { background: var(--gs-bg-muted); text-decoration: none; }
.gs-mega-tool-logo { width: 2rem; height: 2rem; border-radius: var(--gs-radius-sm); object-fit: contain; background: var(--gs-surface-1); flex-shrink: 0; }
.gs-mega-tool-name { font-size: var(--gs-text-sm); font-weight: var(--gs-weight-semibold); color: var(--gs-text-primary); }
.gs-mega-tool-cat  { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); }

/* Zone D — footer bar */
.gs-mega-footer {
  border-top: 1px solid var(--gs-border-subtle);
  padding: var(--gs-space-3) var(--gs-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gs-surface-2);
}
.gs-mega-footer-link { font-size: var(--gs-text-sm); font-weight: var(--gs-weight-semibold); color: var(--gs-cp-t); text-decoration: none; }
.gs-mega-footer-link:hover { text-decoration: underline; }

/* Mobile nav drawer */
.gs-nav-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(80vw, 25rem);
  background: var(--gs-surface-0);
  z-index: var(--gs-z-sidebar);
  box-shadow: var(--gs-shadow-2xl);
  transform: translateX(-100%);
  transition: transform var(--gs-duration-slow) var(--gs-ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gs-nav-drawer.open { transform: translateX(0); }
.gs-nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gs-space-5);
  height: var(--gs-navbar-height);
  border-bottom: 1px solid var(--gs-border-subtle);
  flex-shrink: 0;
}
.gs-nav-drawer-body { flex: 1; overflow-y: auto; padding: var(--gs-space-3); }
.gs-nav-drawer-link {
  display: flex;
  align-items: center;
  gap: var(--gs-space-3);
  padding: var(--gs-space-3);
  border-radius: var(--gs-radius-md);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-medium);
  color: var(--gs-text-secondary);
  text-decoration: none;
  transition: var(--gs-transition-colors);
}
.gs-nav-drawer-link:hover,
.gs-nav-drawer-link.active { background: var(--gs-cp-s); color: var(--gs-cp-t); text-decoration: none; }

/* Overlay behind drawer */
.gs-overlay {
  position: fixed;
  inset: 0;
  background: var(--gs-bg-overlay);
  z-index: calc(var(--gs-z-sidebar) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gs-duration-slow) var(--gs-ease-out);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.gs-overlay.open { opacity: 1; pointer-events: auto; }


/* ============================================================
 * § 18 · gs-footer — FOOTER
 * Always dark background regardless of page theme
 * ============================================================ */

.gs-footer {
  background: var(--gs-neutral-900);
  color: var(--gs-neutral-300);
  border-top: 1px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .gs-footer {
  background: var(--gs-surface-1);
  border-top-color: var(--gs-border-subtle);
}

.gs-footer-main  { padding-top: var(--gs-space-16); padding-bottom: var(--gs-space-12); }
.gs-footer-inner { max-width: var(--gs-container-max); margin-inline: auto; padding-inline: var(--gs-space-6); }

.gs-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gs-space-10);
}
@media (max-width: 991.98px) {
  .gs-footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--gs-space-8); }
  .gs-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .gs-footer-grid { grid-template-columns: 1fr; }
  .gs-footer-brand { grid-column: auto; }
}

/* Brand column */
.gs-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-space-2);
  text-decoration: none;
  margin-bottom: var(--gs-space-4);
}
.gs-footer-logo-mark {
  width: 2rem; height: 2rem;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--gs-purple-800), var(--gs-green-700));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gs-footer-logo-name {
  font-family: var(--gs-font-display);
  font-size: 1.125rem;
  font-weight: var(--gs-weight-extrabold);
  color: var(--gs-neutral-0);
  letter-spacing: var(--gs-tracking-tight);
  line-height: 1;
}
.gs-footer-logo-name .dot { color: var(--gs-green-400); }
.gs-footer-tagline {
  font-size: var(--gs-text-sm);
  color: var(--gs-neutral-400);
  line-height: var(--gs-leading-relaxed);
  max-width: 22rem;
  margin-bottom: var(--gs-space-5);
}
.gs-footer-social { display: flex; gap: var(--gs-space-2); flex-wrap: wrap; }
.gs-footer-social-link {
  width: 2rem; height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gs-radius-md);
  background: rgba(255,255,255,0.06);
  color: var(--gs-neutral-400);
  font-size: var(--gs-size-icon-md);
  text-decoration: none;
  transition: background var(--gs-duration-fast), color var(--gs-duration-fast);
}
.gs-footer-social-link:hover { background: var(--gs-purple-800); color: #fff; text-decoration: none; }

/* Link columns */
.gs-footer-col-title {
  display: block;
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-neutral-0);
  letter-spacing: var(--gs-tracking-wide);
  margin-bottom: var(--gs-space-4);
}
.gs-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gs-space-2_5); }
.gs-footer-link  { font-size: var(--gs-text-sm); color: var(--gs-neutral-400); text-decoration: none; transition: color var(--gs-duration-fast); }
.gs-footer-link:hover { color: var(--gs-neutral-0); text-decoration: none; }

/* Newsletter */
.gs-footer-newsletter {
  max-width: var(--gs-container-max);
  margin-inline: auto;
  padding: var(--gs-space-10) var(--gs-space-6);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gs-space-8);
  flex-wrap: wrap;
}
.gs-footer-newsletter h3 { font-size: var(--gs-text-lg); color: var(--gs-neutral-0); margin-bottom: var(--gs-space-1); }
.gs-footer-newsletter p  { font-size: var(--gs-text-sm); color: var(--gs-neutral-400); margin: 0; }
.gs-footer-newsletter-form {
  display: flex;
  gap: var(--gs-space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.gs-footer-newsletter-input {
  height: var(--gs-btn-height-md);
  min-width: 18rem;
  padding-inline: var(--gs-space-4);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--gs-radius-md);
  color: var(--gs-neutral-0);
  font-size: var(--gs-text-sm);
  outline: none;
  transition: border-color var(--gs-duration-fast);
}
.gs-footer-newsletter-input::placeholder { color: var(--gs-neutral-500); }
.gs-footer-newsletter-input:focus { border-color: var(--gs-purple-400); box-shadow: var(--gs-focus-ring); }

/* Bottom bar */
.gs-footer-bottom {
  max-width: var(--gs-container-max);
  margin-inline: auto;
  padding: var(--gs-space-5) var(--gs-space-6);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gs-space-3);
}
.gs-footer-copy { font-size: var(--gs-text-xs); color: var(--gs-neutral-500); }
.gs-footer-legal { display: flex; gap: var(--gs-space-5); flex-wrap: wrap; }
.gs-footer-legal a { font-size: var(--gs-text-xs); color: var(--gs-neutral-500); text-decoration: none; transition: color var(--gs-duration-fast); }
.gs-footer-legal a:hover { color: var(--gs-neutral-300); text-decoration: none; }

@media (max-width: 575.98px) {
  .gs-footer-newsletter { flex-direction: column; align-items: flex-start; }
  .gs-footer-newsletter-input { min-width: 100%; }
  .gs-footer-newsletter-form { width: 100%; flex-direction: column; }
  .gs-footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .gs-footer-social { justify-content: center; }
}


/* ============================================================
 * § 19 · gs-sidebar — SIDEBAR NAVIGATION
 * Used in: Dashboard, Vendor Portal, Affiliate Portal, Docs
 * States: default (256px), collapsed (72px), mobile (fixed/off)
 * ============================================================ */

.gs-sidebar {
  width: var(--gs-sidebar-width);
  flex-shrink: 0;
  height: calc(100vh - var(--gs-navbar-height));
  position: sticky;
  top: var(--gs-navbar-height);
  background: var(--gs-surface-0);
  border-right: 1px solid var(--gs-border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--gs-duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--gs-border-default) transparent;
  z-index: var(--gs-z-sidebar);
}
.gs-sidebar.collapsed {
  width: var(--gs-sidebar-collapsed);
}

/* Header */
.gs-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gs-space-4) var(--gs-space-4) var(--gs-space-3);
  border-bottom: 1px solid var(--gs-border-subtle);
  flex-shrink: 0;
  gap: var(--gs-space-2);
  min-height: 3.5rem;
}
.gs-sb-user { display: flex; align-items: center; gap: var(--gs-space-2_5); min-width: 0; flex: 1; }
.gs-sb-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gs-purple-800), var(--gs-purple-600));
  color: #fff;
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.gs-sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gs-sb-user-info { min-width: 0; flex: 1; }
.gs-sb-user-name {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--gs-leading-snug);
}
.gs-sb-user-email {
  font-size: var(--gs-text-xs);
  color: var(--gs-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--gs-leading-snug);
}

/* Collapsed-hide pattern — labels/badges fade + shrink */
.gs-collapsed-hide {
  opacity: 1;
  max-width: 12rem;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity var(--gs-duration-fast) var(--gs-ease-out),
              max-width var(--gs-duration-slow) cubic-bezier(0.4,0,0.2,1);
}
.gs-sidebar.collapsed .gs-collapsed-hide {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}

/* Collapse button */
.gs-sb-collapse-btn {
  width: 1.75rem; height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--gs-radius-xs);
  color: var(--gs-text-tertiary);
  cursor: pointer;
  font-size: var(--gs-text-sm);
  flex-shrink: 0;
  transition: var(--gs-transition-colors);
}
.gs-sb-collapse-btn:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); }
.gs-sb-collapse-btn:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); }

/* Nav body */
.gs-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--gs-space-3) var(--gs-space-2_5);
  scrollbar-width: thin;
  scrollbar-color: var(--gs-border-default) transparent;
}
.gs-sidebar-nav::-webkit-scrollbar { width: 4px; }
.gs-sidebar-nav::-webkit-scrollbar-thumb { background: var(--gs-border-default); border-radius: 4px; }

/* Section label */
.gs-sb-section-title {
  font-size: var(--gs-text-2xs);
  font-weight: var(--gs-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-widest);
  color: var(--gs-text-disabled);
  padding: var(--gs-space-3) var(--gs-space-2) var(--gs-space-1_5);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}
.gs-sidebar.collapsed .gs-sb-section-title {
  font-size: 0.4rem;
  padding-inline: var(--gs-space-1);
  text-align: center;
  opacity: 0.5;
}

/* Nav links */
.gs-sb-link {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2_5);
  padding: var(--gs-space-2_5) var(--gs-space-2);
  border-radius: var(--gs-radius-md);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-medium);
  color: var(--gs-text-tertiary);
  text-decoration: none;
  border-left: 3px solid transparent;
  margin-bottom: 2px;
  position: relative;
  transition: background var(--gs-duration-fast) var(--gs-ease-out),
              color var(--gs-duration-fast) var(--gs-ease-out);
}
.gs-sb-link:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); text-decoration: none; }
.gs-sb-link.active,
.gs-sb-link[aria-current="page"] {
  background: var(--gs-cp-s);
  color: var(--gs-cp-t);
  border-left-color: var(--gs-cp);
  font-weight: var(--gs-weight-semibold);
}
[data-theme="dark"] .gs-sb-link.active { background: var(--gs-cp-m); }
.gs-sb-link:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); }

.gs-sb-icon {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  line-height: 1;
  color: var(--gs-purple-800);
}
.gs-sb-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity var(--gs-duration-fast) var(--gs-ease-out),
              max-width var(--gs-duration-slow) cubic-bezier(0.4,0,0.2,1);
  opacity: 1;
  max-width: 12rem;
}
.gs-sidebar.collapsed .gs-sb-label { opacity: 0; max-width: 0; pointer-events: none; }

.gs-sb-badge {
  font-size: var(--gs-text-2xs);
  font-weight: var(--gs-weight-bold);
  background: var(--gs-cp);
  color: #fff;
  min-width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--gs-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gs-space-1_5);
  flex-shrink: 0;
  transition: opacity var(--gs-duration-fast);
}
.gs-sidebar.collapsed .gs-sb-badge { opacity: 0; pointer-events: none; }

/* Tooltip on hover in collapsed state */
.gs-sb-tooltip {
  display: none;
  position: absolute;
  left: calc(var(--gs-sidebar-collapsed) - 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--gs-text-primary);
  color: var(--gs-bg-base);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-semibold);
  padding: var(--gs-space-1_5) var(--gs-space-2_5);
  border-radius: var(--gs-radius-xs);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--gs-z-tooltip);
  box-shadow: var(--gs-shadow-md);
}
.gs-sb-tooltip::before {
  content: '';
  position: absolute;
  right: 100%; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--gs-text-primary);
}
.gs-sidebar.collapsed .gs-sb-link:hover .gs-sb-tooltip { display: block; }

/* Sidebar divider */
.gs-sb-divider { height: 1px; background: var(--gs-border-subtle); margin: var(--gs-space-2) var(--gs-space-2); }

/* Footer */
.gs-sidebar-footer {
  border-top: 1px solid var(--gs-border-subtle);
  padding: var(--gs-space-3) var(--gs-space-2_5);
  flex-shrink: 0;
}
.gs-sb-footer-link {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2_5);
  padding: var(--gs-space-2) var(--gs-space-2);
  border-radius: var(--gs-radius-md);
  font-size: var(--gs-text-sm);
  color: var(--gs-text-tertiary);
  text-decoration: none;
  transition: var(--gs-transition-colors);
}
.gs-sb-footer-link:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); text-decoration: none; }

/* Mobile: fixed, slides in */
.gs-sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--gs-bg-overlay);
  z-index: calc(var(--gs-z-sidebar) - 1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gs-duration-slow) var(--gs-ease-out);
}
@media (max-width: 991.98px) {
  .gs-sidebar {
    position: fixed;
    top: var(--gs-navbar-height);
    left: 0;
    bottom: 0;
    width: var(--gs-sidebar-width) !important;
    transform: translateX(-100%);
    box-shadow: var(--gs-shadow-2xl);
    transition: transform var(--gs-duration-slow) var(--gs-ease-out);
  }
  .gs-sidebar.mobile-open {
    transform: translateX(0);
  }
  .gs-sb-overlay { display: block; }
  .gs-sb-overlay.visible { opacity: 1; pointer-events: auto; }
  .gs-sb-collapse-btn { display: none; }
}


/* ============================================================
 * § 20 · gs-dashboard — DASHBOARD LAYOUT
 * ============================================================ */

.gs-dash-layout { display: flex; min-height: calc(100vh - var(--gs-navbar-height)); }
.gs-dash-main   { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--gs-bg-subtle); }

/* Page header */
.gs-dash-header {
  background: var(--gs-surface-0);
  border-bottom: 1px solid var(--gs-border-subtle);
  padding: var(--gs-space-5) var(--gs-space-8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gs-space-4);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.gs-dash-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--gs-space-1_5);
  font-size: var(--gs-text-xs);
  color: var(--gs-text-tertiary);
  margin-bottom: var(--gs-space-2);
  flex-wrap: wrap;
}
.gs-dash-breadcrumb a { color: var(--gs-text-tertiary); text-decoration: none; }
.gs-dash-breadcrumb a:hover { color: var(--gs-cp-t); }
.gs-dash-breadcrumb .sep { color: var(--gs-border-strong); }
.gs-page-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-xl);
  font-weight: var(--gs-weight-extrabold);
  color: var(--gs-text-primary);
  letter-spacing: var(--gs-tracking-tight);
  line-height: var(--gs-leading-tight);
  margin: 0;
}
.gs-page-subtitle {
  font-size: var(--gs-text-sm);
  color: var(--gs-text-tertiary);
  margin-top: var(--gs-space-1);
  line-height: var(--gs-leading-relaxed);
}
.gs-dash-actions {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Content area */
.gs-dash-content { padding: var(--gs-space-8); flex: 1; }
@media (max-width: 767.98px) {
  .gs-dash-header { padding: var(--gs-space-5) var(--gs-space-4); }
  .gs-dash-content { padding: var(--gs-space-5) var(--gs-space-4); }
}

/* Stats row */
.gs-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
  gap: var(--gs-space-4);
  margin-bottom: var(--gs-space-6);
}
@media (max-width: 575.98px) {
  .gs-dashboard-stats { grid-template-columns: repeat(2, 1fr); }
}

/* 12-column widget grid */
.gs-dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gs-space-5);
}
.gs-widget-col-12 { grid-column: span 12; }
.gs-widget-col-8  { grid-column: span 8;  }
.gs-widget-col-6  { grid-column: span 6;  }
.gs-widget-col-4  { grid-column: span 4;  }
.gs-widget-col-3  { grid-column: span 3;  }
@media (max-width: 1199.98px) {
  .gs-widget-col-8 { grid-column: span 12; }
  .gs-widget-col-4 { grid-column: span 6;  }
  .gs-widget-col-3 { grid-column: span 6;  }
}
@media (max-width: 767.98px) {
  .gs-dashboard-widgets { grid-template-columns: 1fr; gap: var(--gs-space-4); }
  .gs-widget-col-12,
  .gs-widget-col-8,
  .gs-widget-col-6,
  .gs-widget-col-4,
  .gs-widget-col-3 { grid-column: span 1; }
}

/* Widget panel */
.gs-widget {
  background: var(--gs-surface-1);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-card);
  box-shadow: var(--gs-shadow-xs);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gs-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gs-space-4) var(--gs-space-5);
  border-bottom: 1px solid var(--gs-border-subtle);
  flex-shrink: 0;
  gap: var(--gs-space-2);
}
.gs-widget-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
}
.gs-widget-title i { color: var(--gs-cp); font-size: var(--gs-size-icon-md); }
.gs-widget-body   { padding: var(--gs-space-5); flex: 1; }
.gs-widget-footer {
  padding: var(--gs-space-3) var(--gs-space-5);
  border-top: 1px solid var(--gs-border-subtle);
  background: var(--gs-surface-2);
  font-size: var(--gs-text-sm);
  flex-shrink: 0;
}
.gs-widget-footer a { color: var(--gs-cp-t); font-weight: var(--gs-weight-medium); }

/* Activity feed */
.gs-activity-feed { display: flex; flex-direction: column; }
.gs-activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gs-space-3);
  padding: var(--gs-space-3) var(--gs-space-5);
  border-bottom: 1px solid var(--gs-border-subtle);
}
.gs-activity-item:last-child { border-bottom: none; }
.gs-activity-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.3rem;
}
.gs-activity-dot-g  { background: var(--gs-status-success-icon); }
.gs-activity-dot-b  { background: var(--gs-status-info-icon); }
.gs-activity-dot-y  { background: var(--gs-status-warning-icon); }
.gs-activity-dot-r  { background: var(--gs-status-error-icon); }
.gs-activity-dot-nt { background: var(--gs-text-tertiary); }
.gs-activity-dot-p  { background: var(--gs-cp); }
.gs-activity-text { flex: 1; font-size: var(--gs-text-sm); color: var(--gs-text-secondary); line-height: var(--gs-leading-snug); }
.gs-activity-time { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); white-space: nowrap; flex-shrink: 0; }


/* ============================================================
 * § 21 · gs-pricing — PRICING CARDS
 * ============================================================ */

.gs-pricing   { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: var(--gs-space-5); align-items: start; }
.gs-pricing-3 { grid-template-columns: repeat(3, 1fr); }
.gs-pricing-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991.98px) {
  .gs-pricing-3, .gs-pricing-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .gs-pricing-3, .gs-pricing-4 { grid-template-columns: 1fr; }
}

.gs-pricing-card {
  position: relative;
  background: var(--gs-surface-1);
  border: 1.5px solid var(--gs-border-default);
  border-radius: var(--gs-radius-2xl);
  padding: var(--gs-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--gs-space-6);
  transition: box-shadow var(--gs-duration-normal) var(--gs-ease-out),
              transform var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-pricing-card:hover { box-shadow: var(--gs-shadow-lg); }
.gs-pricing-card-popular {
  background: var(--gs-surface-0);
  border-color: var(--gs-cp-b);
  border-top: 3px solid var(--gs-cp);
  box-shadow: var(--gs-shadow-primary);
  transform: scale(1.025);
}
@media (max-width: 991.98px) { .gs-pricing-card-popular { transform: none; } }

.gs-pricing-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.gs-pricing-plan {
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-widest);
  color: var(--gs-cp-t);
}
.gs-pricing-name {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-xl);
  font-weight: var(--gs-weight-bold);
  color: var(--gs-text-primary);
  margin: var(--gs-space-1) 0 var(--gs-space-2);
}
.gs-pricing-desc { font-size: var(--gs-text-sm); color: var(--gs-text-tertiary); line-height: var(--gs-leading-relaxed); }

.gs-pricing-price {
  display: flex;
  align-items: flex-end;
  gap: var(--gs-space-1);
  line-height: 1;
}
.gs-pricing-currency {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-xl);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-text-secondary);
  padding-bottom: 0.35rem;
}
.gs-pricing-amount {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-5xl);
  font-weight: var(--gs-weight-extrabold);
  color: var(--gs-text-primary);
  letter-spacing: var(--gs-tracking-tighter);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gs-pricing-period { font-size: var(--gs-text-sm); color: var(--gs-text-tertiary); padding-bottom: 0.45rem; }
.gs-pricing-free { font-family: var(--gs-font-display); font-size: var(--gs-text-4xl); font-weight: var(--gs-weight-extrabold); color: var(--gs-cs); line-height: 1; }
.gs-pricing-note { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); margin-top: var(--gs-space-1); }

.gs-pricing-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gs-space-2_5); flex: 1; }
.gs-pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--gs-space-2);
  font-size: var(--gs-text-sm);
  color: var(--gs-text-secondary);
  line-height: var(--gs-leading-snug);
}
.gs-pricing-feature-icon    { flex-shrink: 0; margin-top: 1px; color: var(--gs-status-success-icon); font-size: var(--gs-size-icon-sm); }
.gs-pricing-feature-icon-no { color: var(--gs-text-disabled); }
.gs-pricing-feature-off     { color: var(--gs-text-disabled); }
.gs-pricing-feature-group   { font-size: var(--gs-text-xs); font-weight: var(--gs-weight-semibold); text-transform: uppercase; letter-spacing: var(--gs-tracking-wide); color: var(--gs-text-tertiary); margin-top: var(--gs-space-2); }
.gs-pricing-divider         { height: 1px; background: var(--gs-border-subtle); margin-block: var(--gs-space-1); border: none; }

.gs-pricing-cta { margin-top: auto; }
.gs-pricing-cta .gs-btn { width: 100%; }

/* Billing toggle */
.gs-pricing-toggle {
  display: inline-flex;
  background: var(--gs-surface-2);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-full);
  padding: var(--gs-space-1);
  gap: 0;
}
.gs-pricing-toggle-btn {
  padding: var(--gs-space-1_5) var(--gs-space-5);
  border-radius: var(--gs-radius-full);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-medium);
  cursor: pointer;
  background: none;
  border: none;
  color: var(--gs-text-tertiary);
  transition: var(--gs-transition-colors), box-shadow var(--gs-duration-fast);
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
}
.gs-pricing-toggle-btn.active {
  background: var(--gs-surface-0);
  color: var(--gs-text-primary);
  box-shadow: var(--gs-shadow-sm);
  font-weight: var(--gs-weight-semibold);
}


/* ============================================================
 * § 22 · gs-auth — AUTH PAGE LAYOUT
 * Two-column: brand panel (left) + form panel (right)
 * ============================================================ */

.gs-auth-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 767.98px) { .gs-auth-layout { grid-template-columns: 1fr; } }

/* Brand panel */
.gs-auth-brand {
  background: linear-gradient(155deg, #3B1AA8 0%, var(--gs-purple-800) 50%, #1a4a0a 100%);
  padding: var(--gs-space-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767.98px) { .gs-auth-brand { display: none; } }
.gs-auth-brand-inner { position: relative; z-index: 1; max-width: 28rem; }

/* Decorative blobs */
.gs-auth-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.20;
  pointer-events: none;
}
.gs-auth-blob-1 { width: 22rem; height: 22rem; background: var(--gs-purple-300); top: -5rem; right: -5rem; }
.gs-auth-blob-2 { width: 16rem; height: 16rem; background: var(--gs-green-400);  bottom: -3rem; left: -3rem; }

.gs-auth-brand-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-3xl);
  font-weight: var(--gs-weight-extrabold);
  color: #fff;
  letter-spacing: var(--gs-tracking-tighter);
  line-height: var(--gs-leading-tight);
  margin-bottom: var(--gs-space-4);
}
.gs-auth-brand-sub {
  font-size: var(--gs-text-md);
  color: rgba(255,255,255,0.72);
  line-height: var(--gs-leading-relaxed);
  margin-bottom: var(--gs-space-8);
}
.gs-auth-brand-stats { display: flex; gap: var(--gs-space-6); flex-wrap: wrap; margin-bottom: var(--gs-space-8); }
.gs-auth-stat-val { font-family: var(--gs-font-display); font-size: var(--gs-text-2xl); font-weight: var(--gs-weight-extrabold); color: #fff; line-height: 1; }
.gs-auth-stat-lbl { font-size: var(--gs-text-xs); color: rgba(255,255,255,0.55); margin-top: var(--gs-space-1); }
.gs-auth-features  { display: flex; flex-direction: column; gap: var(--gs-space-3); }
.gs-auth-feature   { display: flex; align-items: center; gap: var(--gs-space-3); font-size: var(--gs-text-sm); color: rgba(255,255,255,0.78); }
.gs-auth-feature i { color: var(--gs-green-400); font-size: var(--gs-size-icon-md); flex-shrink: 0; }

/* Form panel */
.gs-auth-form-panel {
  background: var(--gs-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gs-space-8) var(--gs-space-6);
  min-height: 100dvh;
}
.gs-auth-card {
  width: 100%;
  max-width: 26.25rem;
  background: var(--gs-surface-0);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-2xl);
  padding: var(--gs-space-8);
  box-shadow: var(--gs-shadow-lg);
}
.gs-auth-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-2xl);
  font-weight: var(--gs-weight-extrabold);
  color: var(--gs-text-primary);
  letter-spacing: var(--gs-tracking-tight);
  margin-bottom: var(--gs-space-1_5);
}
.gs-auth-sub { font-size: var(--gs-text-sm); color: var(--gs-text-tertiary); line-height: var(--gs-leading-relaxed); margin-bottom: var(--gs-space-6); }

/* OR divider */
.gs-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--gs-space-3);
  margin-block: var(--gs-space-5);
  font-size: var(--gs-text-xs);
  color: var(--gs-text-tertiary);
}
.gs-auth-divider::before,
.gs-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--gs-border-default); }

/* OAuth button */
.gs-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gs-space-2_5);
  width: 100%;
  height: var(--gs-btn-height-md);
  background: var(--gs-surface-1);
  border: 1.5px solid var(--gs-border-default);
  border-radius: var(--gs-radius-btn);
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: var(--gs-transition-colors);
}
.gs-oauth-btn:hover { background: var(--gs-bg-muted); border-color: var(--gs-border-strong); text-decoration: none; color: var(--gs-text-primary); transform: translateY(-1px); box-shadow: var(--gs-shadow-sm); }
.gs-oauth-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--gs-focus-ring); }
/* Social buttons: TWO per row on EVERY device (spacing/typography tighten on small phones to fit). */
.gs-oauth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gs-space-2, .5rem); margin-bottom: var(--gs-space-1, .25rem); }
.gs-oauth-grid .gs-oauth-btn { width: 100%; min-width: 0; gap: .4rem; padding: 0 .45rem; overflow: hidden; }
.gs-oauth-grid .gs-oauth-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gs-oauth-grid .gs-oauth-icon { flex: 0 0 auto; }
@media (max-width: 480px) {
  .gs-oauth-grid { gap: .4rem; }
  .gs-oauth-grid .gs-oauth-btn { font-size: .8125rem; padding: 0 .35rem; height: 44px; }
  .gs-oauth-grid .gs-oauth-icon { width: 16px !important; height: 16px !important; font-size: 1rem !important; }
}

/* Password strength meter */
.gs-pw-meter { margin-top: var(--gs-space-2); }
.gs-pw-track {
  height: 4px;
  background: var(--gs-bg-emphasis);
  border-radius: var(--gs-radius-full);
  overflow: hidden;
  margin-bottom: var(--gs-space-1);
}
.gs-pw-bar {
  height: 100%;
  border-radius: var(--gs-radius-full);
  width: 0;
  transition: width var(--gs-duration-slow) var(--gs-ease-out), background var(--gs-duration-slow) var(--gs-ease-out);
}
.gs-pw-bar[data-level="1"] { width: 25%; background: var(--gs-status-error-icon); }
.gs-pw-bar[data-level="2"] { width: 50%; background: var(--gs-status-warning-icon); }
.gs-pw-bar[data-level="3"] { width: 75%; background: var(--gs-orange-500); }
.gs-pw-bar[data-level="4"] { width: 90%; background: var(--gs-cs); }
.gs-pw-bar[data-level="5"] { width: 100%; background: var(--gs-green-600); }

@media (max-width: 575.98px) {
  .gs-auth-form-panel { padding: var(--gs-space-6) var(--gs-space-4); align-items: flex-start; }
  .gs-auth-card { border: none; box-shadow: none; background: transparent; padding: 0; max-width: 100%; }
}


/* ============================================================
 * § 23 · gs-blog — BLOG COMPONENTS
 * ============================================================ */

/* Blog grid */
.gs-blog-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gs-space-6); }
.gs-blog-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gs-space-6); }
@media (max-width: 991.98px) { .gs-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .gs-blog-grid, .gs-blog-grid-2 { grid-template-columns: 1fr; } }

/* Blog card */
.gs-blog-card {
  background: var(--gs-surface-1);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--gs-duration-normal) var(--gs-ease-out),
              transform var(--gs-duration-normal) var(--gs-ease-out),
              border-color var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-blog-card:hover { box-shadow: var(--gs-shadow-xl); transform: translateY(-3px); border-color: var(--gs-cp-b); text-decoration: none; color: inherit; }
.gs-blog-card:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--gs-focus-ring), var(--gs-shadow-md); }

/* Category thumbnail gradients */
.gs-blog-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: linear-gradient(135deg, var(--gs-purple-700), var(--gs-purple-900)); }
.gs-blog-thumb-ai     { background: linear-gradient(135deg, #5B21B6, #1E3A8A); }
.gs-blog-thumb-seo    { background: linear-gradient(135deg, #3D8B37, #15803D); }
.gs-blog-thumb-mktg   { background: linear-gradient(135deg, #1D4ED8, #6D28D9); }
.gs-blog-thumb-social { background: linear-gradient(135deg, #7C3AED, #DB2777); }
.gs-blog-thumb-dev    { background: linear-gradient(135deg, #0F172A, #1E40AF); }
.gs-blog-thumb-ecom   { background: linear-gradient(135deg, #F97316, #DC2626); }
.gs-blog-thumb-prod   { background: linear-gradient(135deg, #0891B2, #0E7490); }
.gs-blog-thumb-fin    { background: linear-gradient(135deg, #059669, #065F46); }
.gs-blog-thumb-design { background: linear-gradient(135deg, #EC4899, #7C3AED); }
.gs-blog-thumb-guide  { background: linear-gradient(135deg, #CA8A04, #F97316); }
[data-theme="dark"] .gs-blog-thumb-ai  { background: linear-gradient(135deg, rgba(91,33,182,.5), rgba(30,58,138,.5)); }

.gs-blog-card-body { padding: var(--gs-space-5); flex: 1; display: flex; flex-direction: column; }
.gs-blog-cat {
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-wider);
  color: var(--gs-cp-t);
  margin-bottom: var(--gs-space-2);
  display: flex;
  align-items: center;
  gap: var(--gs-space-1);
}
.gs-blog-card-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-bold);
  color: var(--gs-text-primary);
  line-height: var(--gs-leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--gs-space-3);
}
.gs-blog-excerpt {
  font-size: var(--gs-text-sm);
  color: var(--gs-text-secondary);
  line-height: var(--gs-leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--gs-space-4);
  flex: 1;
}
.gs-blog-meta {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  font-size: var(--gs-text-xs);
  color: var(--gs-text-tertiary);
  margin-top: auto;
  padding-top: var(--gs-space-4);
  border-top: 1px solid var(--gs-border-subtle);
  flex-wrap: wrap;
}
.gs-blog-meta-sep { color: var(--gs-border-strong); }

/* Featured article (2-col grid card) */
.gs-blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--gs-surface-1);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-2xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--gs-duration-normal) var(--gs-ease-out), transform var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-blog-featured:hover { box-shadow: var(--gs-shadow-2xl); transform: translateY(-3px); text-decoration: none; color: inherit; }
.gs-blog-featured:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--gs-focus-ring), var(--gs-shadow-lg); }
@media (max-width: 767.98px) { .gs-blog-featured { grid-template-columns: 1fr; } }
.gs-blog-featured-thumb { height: 100%; min-height: 20rem; object-fit: cover; display: block; width: 100%; background: linear-gradient(135deg, var(--gs-purple-700), var(--gs-purple-900)); }
@media (max-width: 767.98px) { .gs-blog-featured-thumb { min-height: 14rem; } }
.gs-blog-featured-body { padding: var(--gs-space-8); display: flex; flex-direction: column; justify-content: center; }
.gs-blog-featured-title {
  font-family: var(--gs-font-display);
  font-size: clamp(var(--gs-text-xl), 3vw, var(--gs-text-2xl));
  font-weight: var(--gs-weight-extrabold);
  letter-spacing: var(--gs-tracking-tight);
  color: var(--gs-text-primary);
  margin-bottom: var(--gs-space-4);
}
.gs-read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-space-1_5);
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-cp-t);
  margin-top: var(--gs-space-4);
  transition: gap var(--gs-duration-fast);
}
.gs-blog-featured:hover .gs-read-more { gap: var(--gs-space-2_5); }


/* ============================================================
 * § 24 · gs-card-tool — TOOL CARDS
 * ============================================================ */

/* Standard tool card */
.gs-card-tool {
  background: var(--gs-surface-1);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-card);
  box-shadow: var(--gs-shadow-xs);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--gs-duration-normal) var(--gs-ease-out),
              border-color var(--gs-duration-normal) var(--gs-ease-out),
              transform var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-card-tool:hover { box-shadow: var(--gs-shadow-xl); border-color: var(--gs-cp-b); transform: translateY(-3px); }
.gs-card-tool:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--gs-focus-ring), var(--gs-shadow-md); }
.gs-card-tool-primary { border-top: 3px solid var(--gs-cp); }
@media (hover: none) { .gs-card-tool:hover { transform: none; box-shadow: var(--gs-shadow-sm); } }

.gs-card-tool-header {
  padding: var(--gs-space-5) var(--gs-space-5) var(--gs-space-3);
  display: flex;
  align-items: flex-start;
  gap: var(--gs-space-3);
}
.gs-card-tool-logo {
  width: 3rem; height: 3rem;
  border-radius: var(--gs-radius-md);
  object-fit: contain;
  background: var(--gs-bg-muted);
  border: 1px solid var(--gs-border-default);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  overflow: hidden;
}
.gs-card-tool-logo img { width: 100%; height: 100%; object-fit: contain; }
.gs-card-tool-info { flex: 1; min-width: 0; }
.gs-card-tool-name {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-semibold);
  color: var(--gs-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--gs-space-1);
}
.gs-card-tool-badges { display: flex; gap: var(--gs-space-1); flex-wrap: wrap; }
.gs-card-tool-status { position: absolute; top: var(--gs-space-3); right: var(--gs-space-3); display: flex; flex-direction: column; align-items: flex-end; gap: var(--gs-space-1); }

.gs-card-tool-body { padding: 0 var(--gs-space-5) var(--gs-space-4); flex: 1; }
.gs-card-tool-desc {
  font-size: var(--gs-text-sm);
  color: var(--gs-text-secondary);
  line-height: var(--gs-leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--gs-space-3);
}
.gs-card-tool-rating { display: flex; align-items: center; gap: var(--gs-space-1_5); margin-bottom: var(--gs-space-2); }
.gs-card-tool-stars  { color: var(--gs-orange-500); font-size: var(--gs-text-xs); letter-spacing: 1px; }
.gs-card-tool-rating-score { font-weight: var(--gs-weight-bold); color: var(--gs-text-primary); font-size: var(--gs-text-sm); }
.gs-card-tool-rating-count { color: var(--gs-text-tertiary); font-size: var(--gs-text-xs); }
.gs-card-tool-price { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); }
.gs-card-tool-price-free { color: var(--gs-cs); font-weight: var(--gs-weight-medium); }

.gs-card-tool-footer {
  padding: var(--gs-space-3) var(--gs-space-5);
  border-top: 1px solid var(--gs-border-subtle);
  background: var(--gs-surface-2);
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  flex-shrink: 0;
}

/* Compact tool card */
.gs-card-tool-compact {
  display: flex;
  align-items: center;
  gap: var(--gs-space-3);
  padding: var(--gs-space-3) var(--gs-space-4);
  background: var(--gs-surface-1);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-md);
  text-decoration: none;
  color: inherit;
  transition: var(--gs-transition-colors);
}
.gs-card-tool-compact:hover { background: var(--gs-bg-muted); border-color: var(--gs-cp-b); text-decoration: none; color: inherit; }
.gs-card-tool-compact .gs-card-tool-logo { width: 2rem; height: 2rem; border-radius: var(--gs-radius-sm); font-size: 1rem; }
.gs-card-tool-compact .gs-card-tool-name { font-size: var(--gs-text-sm); margin-bottom: 0; }
.gs-card-tool-compact .gs-card-tool-cat  { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); }

/* Featured tool card (horizontal layout) */
.gs-card-tool-featured {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--gs-space-5);
  background: var(--gs-surface-1);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-2xl);
  padding: var(--gs-space-6);
  box-shadow: var(--gs-shadow-sm);
  transition: var(--gs-transition-base);
}
.gs-card-tool-featured:hover { box-shadow: var(--gs-shadow-lg); border-color: var(--gs-cp-b); }
.gs-card-tool-featured .gs-card-tool-logo { width: 5rem; height: 5rem; border-radius: var(--gs-radius-lg); font-size: 2.5rem; }
.gs-card-tool-featured .gs-card-tool-name { font-size: var(--gs-text-lg); margin-bottom: var(--gs-space-2); }
.gs-card-tool-featured .gs-card-tool-desc { -webkit-line-clamp: 3; }

/* Mini inline tool card */
.gs-card-tool-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-space-2);
  padding: var(--gs-space-1_5) var(--gs-space-3);
  background: var(--gs-surface-2);
  border: 1px solid var(--gs-border-subtle);
  border-radius: var(--gs-radius-full);
  font-size: var(--gs-text-xs);
  color: var(--gs-text-secondary);
  text-decoration: none;
  transition: var(--gs-transition-colors);
}
.gs-card-tool-mini:hover { background: var(--gs-bg-emphasis); text-decoration: none; color: var(--gs-text-primary); }
.gs-card-tool-mini img,
.gs-card-tool-mini .gs-card-tool-mini-logo { width: 1.25rem; height: 1.25rem; border-radius: var(--gs-radius-xs); flex-shrink: 0; }


/* ============================================================
 * § 25 · gs-card-review — REVIEW CARDS
 * ============================================================ */

.gs-card-review {
  background: var(--gs-surface-1);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-card);
  padding: var(--gs-space-6);
}

.gs-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gs-space-3);
  margin-bottom: var(--gs-space-4);
  flex-wrap: wrap;
}
.gs-review-reviewer { display: flex; align-items: center; gap: var(--gs-space-3); }
.gs-review-meta     { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); margin-top: var(--gs-space-0_5); }
.gs-review-rating-row { display: flex; align-items: center; gap: var(--gs-space-2); flex-shrink: 0; }
.gs-review-stars { color: var(--gs-orange-500); font-size: var(--gs-text-sm); }
.gs-review-score { font-family: var(--gs-font-display); font-size: var(--gs-text-sm); font-weight: var(--gs-weight-bold); color: var(--gs-text-primary); }

.gs-review-headline { font-size: var(--gs-text-sm); font-weight: var(--gs-weight-semibold); color: var(--gs-text-primary); margin-bottom: var(--gs-space-2); }
.gs-review-body {
  font-size: var(--gs-text-sm);
  color: var(--gs-text-secondary);
  line-height: var(--gs-leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-review-usage {
  font-size: var(--gs-text-xs);
  color: var(--gs-text-tertiary);
  margin-top: var(--gs-space-3);
  display: flex;
  gap: var(--gs-space-3);
  flex-wrap: wrap;
}

.gs-review-actions {
  display: flex;
  align-items: center;
  gap: var(--gs-space-3);
  margin-top: var(--gs-space-4);
  padding-top: var(--gs-space-4);
  border-top: 1px solid var(--gs-border-subtle);
  flex-wrap: wrap;
}
.gs-review-helpful-btn {
  display: flex;
  align-items: center;
  gap: var(--gs-space-1_5);
  font-size: var(--gs-text-xs);
  color: var(--gs-text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--gs-space-1) var(--gs-space-2);
  border-radius: var(--gs-radius-md);
  transition: var(--gs-transition-colors);
}
.gs-review-helpful-btn:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); }
.gs-review-helpful-btn.active { color: var(--gs-cp); }
.gs-review-helpful-btn:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); }

/* Vendor response */
.gs-vendor-response {
  margin-top: var(--gs-space-4);
  background: var(--gs-surface-2);
  border-left: 3px solid var(--gs-ct);
  border-radius: 0 var(--gs-radius-md) var(--gs-radius-md) 0;
  padding: var(--gs-space-4);
}
.gs-vendor-label {
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-wider);
  color: var(--gs-ct);
  margin-bottom: var(--gs-space-2);
}


/* ============================================================
 * § 26 · gs-search — SEARCH BAR
 * ============================================================ */

.gs-search {
  position: relative;
  display: flex;
  align-items: center;
}
.gs-search-input {
  width: 100%;
  height: var(--gs-input-height-md);
  padding-inline: var(--gs-space-10);
  background: var(--gs-surface-2);
  border: 1.5px solid var(--gs-border-default);
  border-radius: var(--gs-radius-full);
  font-family: var(--gs-font-body);
  font-size: var(--gs-text-sm);
  color: var(--gs-text-primary);
  outline: none;
  transition: var(--gs-transition-colors), max-width var(--gs-duration-slow) var(--gs-ease-out);
}
.gs-search-input::placeholder { color: var(--gs-text-disabled); }
.gs-search-input:focus {
  background: var(--gs-surface-0);
  border-color: var(--gs-cp);
  box-shadow: var(--gs-focus-ring);
}
.gs-search-icon,
.gs-search-icon-left {
  position: absolute;
  left: var(--gs-space-3_5);
  color: var(--gs-text-tertiary);
  font-size: var(--gs-size-icon-md);
  pointer-events: none;
  line-height: 1;
}
.gs-search-clear {
  position: absolute;
  right: var(--gs-space-3);
  background: none;
  border: none;
  color: var(--gs-text-tertiary);
  cursor: pointer;
  font-size: var(--gs-size-icon-md);
  padding: var(--gs-space-1);
  line-height: 1;
  transition: color var(--gs-duration-fast);
  display: none;
}
.gs-search-clear:hover { color: var(--gs-text-primary); }
.gs-search:has(.gs-search-input:not(:placeholder-shown)) .gs-search-clear { display: block; }

/* Hero search */
.gs-search-hero .gs-search-input {
  height: var(--gs-input-height-lg);
  font-size: var(--gs-text-base);
  padding-inline: var(--gs-space-12);
}
.gs-search-hero .gs-search-icon,
.gs-search-hero .gs-search-icon-left { left: var(--gs-space-5); font-size: var(--gs-size-icon-lg); }

/* Autocomplete dropdown */
.gs-search-dropdown {
  position: absolute;
  top: calc(100% + var(--gs-space-2));
  left: 0; right: 0;
  background: var(--gs-surface-0);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-dropdown);
  box-shadow: var(--gs-shadow-xl);
  max-height: 25rem;
  overflow-y: auto;
  z-index: var(--gs-z-dropdown);
}
.gs-search-dropdown-section { padding: var(--gs-space-2) 0; }
.gs-search-dropdown-label {
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-wider);
  color: var(--gs-text-tertiary);
  padding: var(--gs-space-2) var(--gs-space-4);
}
.gs-search-result-item {
  display: flex;
  align-items: center;
  gap: var(--gs-space-3);
  padding: var(--gs-space-2_5) var(--gs-space-4);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--gs-duration-fast);
}
.gs-search-result-item:hover { background: var(--gs-bg-muted); text-decoration: none; color: inherit; }
.gs-search-result-logo {
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--gs-radius-xs);
  flex-shrink: 0;
  object-fit: contain;
}
.gs-search-result-name { font-size: var(--gs-text-sm); font-weight: var(--gs-weight-semibold); color: var(--gs-text-primary); }
.gs-search-result-meta { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); }
.gs-search-dropdown-footer {
  padding: var(--gs-space-3) var(--gs-space-4);
  border-top: 1px solid var(--gs-border-subtle);
  font-size: var(--gs-text-xs);
  color: var(--gs-cp-t);
  font-weight: var(--gs-weight-semibold);
}


/* ============================================================
 * § 27 · gs-filter — FILTER COMPONENTS
 * ============================================================ */

.gs-filter-sidebar {
  width: var(--gs-sidebar-width);
  flex-shrink: 0;
}
.gs-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gs-space-5);
  padding-bottom: var(--gs-space-4);
  border-bottom: 1px solid var(--gs-border-subtle);
}
.gs-filter-title { font-family: var(--gs-font-display); font-size: var(--gs-text-base); font-weight: var(--gs-weight-bold); color: var(--gs-text-primary); }

.gs-filter-group { margin-bottom: var(--gs-space-5); padding-bottom: var(--gs-space-5); border-bottom: 1px solid var(--gs-border-subtle); }
.gs-filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.gs-filter-group-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-wider);
  color: var(--gs-text-tertiary);
  margin-bottom: var(--gs-space-3);
}
.gs-filter-chips { display: flex; flex-wrap: wrap; gap: var(--gs-space-2); }
.gs-filter-chip {
  padding: var(--gs-space-1_5) var(--gs-space-3);
  border-radius: var(--gs-radius-full);
  border: 1.5px solid var(--gs-border-default);
  background: var(--gs-surface-1);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-medium);
  color: var(--gs-text-secondary);
  cursor: pointer;
  transition: var(--gs-transition-colors);
  display: flex;
  align-items: center;
  gap: var(--gs-space-1);
  line-height: 1;
}
.gs-filter-chip:hover { border-color: var(--gs-cp); color: var(--gs-cp-t); }
.gs-filter-chip.active { background: var(--gs-cp); border-color: var(--gs-cp); color: var(--gs-cp-fg); }

/* Active filter chips row (horizontal) */
.gs-filter-active-row {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  flex-wrap: wrap;
}

/* Sort control */
.gs-sort-select {
  height: var(--gs-btn-height-sm);
  padding-inline: var(--gs-space-3) var(--gs-space-8);
  background: var(--gs-surface-1);
  border: 1.5px solid var(--gs-border-default);
  border-radius: var(--gs-radius-md);
  font-size: var(--gs-text-sm);
  color: var(--gs-text-primary);
  cursor: pointer;
  outline: none;
  transition: var(--gs-transition-colors);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--gs-space-2_5) center;
  -webkit-appearance: none;
  appearance: none;
}
.gs-sort-select:focus { border-color: var(--gs-cp); box-shadow: var(--gs-focus-ring); }


/* ============================================================
 * § 28 · gs-modal — MODALS
 * Mobile: becomes bottom sheet below 576px
 * ============================================================ */

.gs-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--gs-bg-overlay);
  z-index: var(--gs-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gs-space-6);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.gs-modal {
  background: var(--gs-surface-0);
  border: 1px solid var(--gs-border-subtle);
  border-radius: var(--gs-radius-modal);
  box-shadow: var(--gs-shadow-2xl);
  width: 100%;
  max-width: 36rem;
  max-height: calc(100dvh - 3rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--gs-duration-normal) var(--gs-ease-spring),
              opacity var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-modal-backdrop.open .gs-modal { transform: scale(1); opacity: 1; }

.gs-modal-sm   { max-width: 26rem; }
.gs-modal-lg   { max-width: 48rem; }
.gs-modal-xl   { max-width: 64rem; }
.gs-modal-full { max-width: calc(100vw - 3rem); }

.gs-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gs-space-5) var(--gs-space-6);
  border-bottom: 1px solid var(--gs-border-subtle);
  flex-shrink: 0;
  gap: var(--gs-space-3);
}
.gs-modal-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-lg);
  font-weight: var(--gs-weight-bold);
  color: var(--gs-text-primary);
  margin: 0;
}
.gs-modal-close {
  width: 2rem; height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-md);
  color: var(--gs-text-tertiary);
  cursor: pointer;
  font-size: var(--gs-size-icon-md);
  flex-shrink: 0;
  transition: var(--gs-transition-colors);
}
.gs-modal-close:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); }
.gs-modal-close:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); }

.gs-modal-body   { padding: var(--gs-space-6); flex: 1; overflow-y: auto; }
.gs-modal-footer {
  padding: var(--gs-space-4) var(--gs-space-6);
  border-top: 1px solid var(--gs-border-subtle);
  background: var(--gs-surface-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gs-space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Mobile — bottom sheet */
@media (max-width: 575.98px) {
  .gs-modal-backdrop { align-items: flex-end; padding: 0; }
  .gs-modal {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: var(--gs-radius-xl) var(--gs-radius-xl) 0 0;
    transform: translateY(100%);
    opacity: 1;
  }
  .gs-modal-backdrop.open .gs-modal { transform: translateY(0); }
  .gs-modal::before {
    content: '';
    display: block;
    width: 2.5rem; height: 0.25rem;
    background: var(--gs-border-strong);
    border-radius: var(--gs-radius-full);
    margin: var(--gs-space-3) auto var(--gs-space-2);
    flex-shrink: 0;
  }
}


/* ============================================================
 * § 29 · gs-drawer — DRAWERS
 * ============================================================ */
.gs-drawer-left  { left:  0; transform: translateX(-110%); }
.gs-drawer-right { right: 0; transform: translateX(110%);  }
.gs-drawer.open  { transform: translateX(0); }

.gs-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gs-space-5);
  height: 3.5rem;
  border-bottom: 1px solid var(--gs-border-subtle);
  flex-shrink: 0;
}
.gs-drawer-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-base);
  font-weight: var(--gs-weight-bold);
  color: var(--gs-text-primary);
  margin: 0;
}
.gs-drawer-body   { flex: 1; overflow-y: auto; padding: var(--gs-space-5); }
.gs-drawer-footer {
  height: 4.5rem;
  border-top: 1px solid var(--gs-border-subtle);
  padding-inline: var(--gs-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gs-space-3);
  flex-shrink: 0;
}


/* ============================================================
 * § 30 · gs-toast — TOAST NOTIFICATIONS
 * ============================================================ */

.gs-toast-container {
  position: fixed;
  bottom: var(--gs-space-6);
  right: var(--gs-space-6);
  z-index: var(--gs-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--gs-space-2);
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}
.gs-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--gs-space-3);
  background: var(--gs-neutral-900);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--gs-radius-card);
  padding: var(--gs-space-4);
  box-shadow: var(--gs-shadow-lg);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity var(--gs-duration-slow) var(--gs-ease-spring),
              transform var(--gs-duration-slow) var(--gs-ease-spring);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
}
.gs-toast.visible { opacity: 1; transform: translateY(0); }
[data-theme="dark"] .gs-toast { background: var(--gs-surface-3); border-color: var(--gs-border-default); }

.gs-toast-success { background: var(--gs-status-success-bg); border-color: var(--gs-status-success-border); color: var(--gs-status-success-text); }
.gs-toast-error   { background: var(--gs-neutral-900); border-color: var(--gs-status-error-border); }
.gs-toast-warning { background: var(--gs-neutral-900); border-color: var(--gs-status-warning-border); }
.gs-toast-info    { background: var(--gs-cp-s); border-color: var(--gs-cp-b); color: var(--gs-cp-t); }
[data-theme="dark"] .gs-toast-success { background: var(--gs-status-success-bg); border-color: var(--gs-status-success-border); color: var(--gs-status-success-text); }
[data-theme="dark"] .gs-toast-info    { background: var(--gs-cp-m); border-color: var(--gs-cp-b); color: var(--gs-cp-t); }

.gs-toast-icon { font-size: var(--gs-size-icon-md); flex-shrink: 0; margin-top: 1px; }
.gs-toast-success .gs-toast-icon,
[data-theme="dark"] .gs-toast-success .gs-toast-icon { color: var(--gs-status-success-icon); }
.gs-toast-error   .gs-toast-icon { color: var(--gs-status-error-icon); }
.gs-toast-warning .gs-toast-icon { color: var(--gs-status-warning-icon); }
.gs-toast-info    .gs-toast-icon { color: var(--gs-cp); }

.gs-toast-body  { flex: 1; min-width: 0; }
.gs-toast-title { font-family: var(--gs-font-display); font-size: var(--gs-text-sm); font-weight: var(--gs-weight-semibold); color: var(--gs-neutral-0); margin-bottom: var(--gs-space-0_5); }
.gs-toast-text  { font-size: var(--gs-text-sm); color: var(--gs-neutral-300); line-height: var(--gs-leading-snug); }
.gs-toast-success .gs-toast-title,
.gs-toast-success .gs-toast-text  { color: var(--gs-status-success-text); }
.gs-toast-info .gs-toast-title,
.gs-toast-info .gs-toast-text     { color: var(--gs-cp-t); }

.gs-toast-close {
  background: none; border: none;
  color: var(--gs-neutral-400);
  cursor: pointer; font-size: var(--gs-size-icon-md);
  flex-shrink: 0; padding: 0; line-height: 1;
  transition: color var(--gs-duration-fast);
  margin-top: -1px;
}
.gs-toast-close:hover { color: var(--gs-neutral-0); }

/* Progress bar */
.gs-toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  border-radius: 0 var(--gs-radius-full) var(--gs-radius-full) 0;
  animation: gs-toast-shrink var(--toast-duration, 4s) var(--gs-ease-linear) forwards;
}
.gs-toast-success .gs-toast-progress { background: var(--gs-status-success-icon); }
.gs-toast-error   .gs-toast-progress { display: none; }
.gs-toast-warning .gs-toast-progress { background: var(--gs-status-warning-icon); }
.gs-toast-info    .gs-toast-progress { background: var(--gs-cp); }

@media (max-width: 575.98px) {
  .gs-toast-container { bottom: var(--gs-space-3); left: var(--gs-space-3); right: var(--gs-space-3); }
  .gs-toast { animation: gs-slide-up var(--gs-duration-slow) var(--gs-ease-spring) both; }
}


/* ============================================================
 * § 31 · gs-widget (extra widget-type components)
 * Sparklines, notification dropdown, saved-tool rows
 * ============================================================ */

/* Notification bell dropdown */
.gs-notif-dropdown {
  position: absolute;
  top: calc(100% + var(--gs-space-2));
  right: 0;
  width: 22.5rem;
  max-height: 30rem;
  background: var(--gs-surface-0);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-xl);
  box-shadow: var(--gs-shadow-xl);
  z-index: var(--gs-z-dropdown);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gs-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gs-space-4) var(--gs-space-5);
  border-bottom: 1px solid var(--gs-border-subtle);
  flex-shrink: 0;
}
.gs-notif-title { font-family: var(--gs-font-display); font-size: var(--gs-text-base); font-weight: var(--gs-weight-semibold); color: var(--gs-text-primary); }
.gs-notif-list  { overflow-y: auto; flex: 1; }
.gs-notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gs-space-3);
  padding: var(--gs-space-3) var(--gs-space-5);
  border-bottom: 1px solid var(--gs-border-subtle);
  cursor: pointer;
  transition: background var(--gs-duration-fast);
  text-decoration: none;
  color: inherit;
}
.gs-notif-item:hover  { background: var(--gs-bg-muted); text-decoration: none; color: inherit; }
.gs-notif-item:last-child { border-bottom: none; }
.gs-notif-item.unread { background: var(--gs-cp-s); }
.gs-notif-dot-read   { width: 8px; height: 8px; border-radius: 50%; background: var(--gs-cp); flex-shrink: 0; margin-top: 0.3rem; }
.gs-notif-dot-unread { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex-shrink: 0; margin-top: 0.3rem; }
.gs-notif-item-text  { font-size: var(--gs-text-sm); color: var(--gs-text-secondary); line-height: var(--gs-leading-snug); }
.gs-notif-item-time  { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); margin-top: var(--gs-space-0_5); }
.gs-notif-footer {
  padding: var(--gs-space-3) var(--gs-space-5);
  border-top: 1px solid var(--gs-border-subtle);
  text-align: center;
  flex-shrink: 0;
}

/* Saved-tool row (widget list item) */
.gs-tool-row {
  display: flex;
  align-items: center;
  gap: var(--gs-space-3);
  padding: var(--gs-space-3) var(--gs-space-5);
  border-bottom: 1px solid var(--gs-border-subtle);
  text-decoration: none;
  color: inherit;
  transition: background var(--gs-duration-fast);
}
.gs-tool-row:last-child { border-bottom: none; }
.gs-tool-row:hover { background: var(--gs-surface-2); text-decoration: none; color: inherit; }
.gs-tool-row-logo {
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--gs-radius-sm);
  object-fit: contain;
  background: var(--gs-bg-muted);
  border: 1px solid var(--gs-border-subtle);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}
.gs-tool-row-name { font-size: var(--gs-text-sm); font-weight: var(--gs-weight-semibold); color: var(--gs-text-primary); }
.gs-tool-row-cat  { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); }


/* ============================================================
 * § 32 · UTILITY CLASSES
 * Badges, Alerts, Avatars, Stars, Progress, Tabs, Breadcrumb,
 * Divider, Skeleton, Tooltip, Dropdown, Empty State, Status Dot
 * ============================================================ */

/* ── Badges ────────────────────────────────────────────────── */
.gs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-space-1);
  padding: 0.25rem 0.625rem;
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-semibold);
  letter-spacing: var(--gs-tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  border-radius: var(--gs-radius-badge);
  flex-shrink: 0;
}
.gs-badge-xs { font-size: var(--gs-text-2xs); padding: 0.125rem 0.4rem; }
.gs-badge-lg { font-size: var(--gs-text-sm);  padding: 0.3125rem 0.75rem; }
.gs-badge-pill   { border-radius: var(--gs-radius-full) !important; }
.gs-badge-square { border-radius: 0 !important; }

/* Color variants */
.gs-badge-primary   { background: var(--gs-cp-m);            color: var(--gs-cp-t);  }
.gs-badge-secondary { background: var(--gs-cs-m);            color: var(--gs-cs);    }
.gs-badge-tertiary  { background: var(--gs-ct-s);            color: var(--gs-ct);    }
.gs-badge-success   { background: var(--gs-status-success-bg);  color: var(--gs-status-success-text);  }
.gs-badge-warning   { background: var(--gs-status-warning-bg);  color: var(--gs-status-warning-text);  }
.gs-badge-error     { background: var(--gs-status-error-bg);    color: var(--gs-status-error-text);    }
.gs-badge-info      { background: var(--gs-status-info-bg);     color: var(--gs-status-info-text);     }
.gs-badge-neutral   { background: var(--gs-bg-muted); color: var(--gs-text-secondary); }

/* Solid variants */
.gs-badge-solid-primary   { background: var(--gs-cp);     color: var(--gs-cp-fg); }
.gs-badge-solid-secondary { background: var(--gs-cs);     color: #fff;             }
.gs-badge-solid-tertiary  { background: var(--gs-ct);     color: #fff;             }
.gs-badge-solid-success   { background: var(--gs-success); color: #fff;            }
.gs-badge-solid-error     { background: var(--gs-error);   color: #fff;            }
.gs-badge-solid-neutral   { background: var(--gs-neutral-700); color: #fff;        }

/* Dark theme adjustments */
[data-theme="dark"] .gs-badge-primary   { background: rgba(167,139,250,0.15); color: var(--gs-cp-t); }
[data-theme="dark"] .gs-badge-secondary { background: rgba(74,222,128,0.15);  color: var(--gs-cs);   }
[data-theme="dark"] .gs-badge-neutral   { background: var(--gs-surface-3); color: var(--gs-text-secondary); }


/* ── Alert / Callout ───────────────────────────────────────── */
.gs-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--gs-space-3);
  padding: var(--gs-space-4) var(--gs-space-5);
  border-radius: var(--gs-radius-lg);
  border-left: 3px solid;
  font-size: var(--gs-text-sm);
  line-height: var(--gs-leading-relaxed);
}
.gs-alert > i:first-child { flex-shrink: 0; margin-top: 1px; font-size: var(--gs-size-icon-md); }
.gs-alert-content { flex: 1; min-width: 0; }
.gs-alert-title   { font-weight: var(--gs-weight-semibold); margin-bottom: var(--gs-space-0_5); }
.gs-alert-text    { opacity: 0.9; }
.gs-alert-close   { background: none; border: none; cursor: pointer; color: currentColor; opacity: 0.55; margin-left: auto; flex-shrink: 0; padding: var(--gs-space-0_5); font-size: var(--gs-size-icon-md); line-height: 1; }
.gs-alert-close:hover { opacity: 1; }
.gs-alert-actions { margin-top: var(--gs-space-3); display: flex; gap: var(--gs-space-2); flex-wrap: wrap; }

.gs-alert-success { background: var(--gs-status-success-bg); border-color: var(--gs-status-success-icon); color: var(--gs-status-success-text); }
.gs-alert-warning { background: var(--gs-status-warning-bg); border-color: var(--gs-status-warning-icon); color: var(--gs-status-warning-text); }
.gs-alert-error   { background: var(--gs-status-error-bg);   border-color: var(--gs-status-error-icon);   color: var(--gs-status-error-text);   }
.gs-alert-info    { background: var(--gs-status-info-bg);    border-color: var(--gs-status-info-icon);    color: var(--gs-status-info-text);    }
.gs-alert-neutral { background: var(--gs-bg-muted); border-color: var(--gs-border-default); color: var(--gs-text-secondary); }
.gs-alert-banner  { border-radius: 0; border-left: none; border-bottom: 3px solid; }

/* Callout block (editorial, doc tip) */
.gs-callout {
  display: flex;
  gap: var(--gs-space-4);
  background: var(--gs-cp-s);
  border: 1px solid var(--gs-cp-b);
  border-radius: var(--gs-radius-lg);
  padding: var(--gs-space-5);
  font-size: var(--gs-text-sm);
  color: var(--gs-text-secondary);
  line-height: var(--gs-leading-relaxed);
}
.gs-callout i:first-child { color: var(--gs-cp); font-size: var(--gs-size-icon-md); flex-shrink: 0; margin-top: 1px; }
.gs-callout-title { font-weight: var(--gs-weight-bold); color: var(--gs-text-primary); margin-bottom: var(--gs-space-1); }

/* ── Avatar ────────────────────────────────────────────────── */
.gs-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gs-radius-avatar);
  overflow: hidden;
  background: var(--gs-cp-m);
  color: var(--gs-cp-t);
  font-family: var(--gs-font-display);
  font-weight: var(--gs-weight-bold);
  flex-shrink: 0;
}
.gs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gs-avatar-xs  { width: var(--gs-size-avatar-xs);  height: var(--gs-size-avatar-xs);  font-size: var(--gs-text-xs); }
.gs-avatar-sm  { width: var(--gs-size-avatar-sm);  height: var(--gs-size-avatar-sm);  font-size: var(--gs-text-sm); }
.gs-avatar-md  { width: var(--gs-size-avatar-md);  height: var(--gs-size-avatar-md);  font-size: var(--gs-text-base); }
.gs-avatar-lg  { width: var(--gs-size-avatar-lg);  height: var(--gs-size-avatar-lg);  font-size: var(--gs-text-lg); }
.gs-avatar-xl  { width: var(--gs-size-avatar-xl);  height: var(--gs-size-avatar-xl);  font-size: var(--gs-text-2xl); }
.gs-avatar-2xl { width: var(--gs-size-avatar-2xl); height: var(--gs-size-avatar-2xl); font-size: var(--gs-text-3xl); }
.gs-avatar-rounded { border-radius: var(--gs-radius-lg); }

/* Avatar group (stacked) */
.gs-avatar-group { display: flex; }
.gs-avatar-group .gs-avatar { border: 2px solid var(--gs-bg-base); margin-left: -0.625rem; }
.gs-avatar-group .gs-avatar:first-child { margin-left: 0; }

/* ── Star Rating ───────────────────────────────────────────── */
.gs-stars     { color: var(--gs-orange-500); letter-spacing: 1px; display: inline-flex; align-items: center; }
.gs-stars-sm  { font-size: var(--gs-text-xs); }
.gs-stars-md  { font-size: var(--gs-text-sm); }
.gs-stars-lg  { font-size: var(--gs-text-lg); }
.gs-stars-count { font-size: var(--gs-text-xs); color: var(--gs-text-tertiary); margin-left: var(--gs-space-1); }
.gs-stars-score { font-weight: var(--gs-weight-bold); color: var(--gs-text-primary); font-size: var(--gs-text-sm); margin-left: var(--gs-space-1); }

/* ── Progress bar ──────────────────────────────────────────── */
.gs-progress {
  height: 0.5rem;
  background: var(--gs-bg-emphasis);
  border-radius: var(--gs-radius-full);
  overflow: hidden;
}
.gs-progress-bar {
  height: 100%;
  background: var(--gs-cp);
  border-radius: var(--gs-radius-full);
  transition: width var(--gs-duration-slow) var(--gs-ease-out);
}
.gs-progress-sm { height: 0.25rem; }
.gs-progress-lg { height: 0.75rem; }
.gs-progress-success .gs-progress-bar { background: var(--gs-status-success-icon); }
.gs-progress-warning .gs-progress-bar { background: var(--gs-status-warning-icon); }
.gs-progress-error   .gs-progress-bar { background: var(--gs-status-error-icon); }

/* ── Tabs ──────────────────────────────────────────────────── */
.gs-tabs {
  display: flex;
  border-bottom: 1px solid var(--gs-border-default);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.gs-tabs::-webkit-scrollbar { display: none; }
.gs-tab {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  padding: var(--gs-space-3) var(--gs-space-4);
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-medium);
  color: var(--gs-text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  text-decoration: none;
  transition: color var(--gs-duration-fast) var(--gs-ease-out),
              border-color var(--gs-duration-fast) var(--gs-ease-out);
}
.gs-tab:hover { color: var(--gs-text-primary); text-decoration: none; }
.gs-tab.active,
.gs-tab[aria-selected="true"] { color: var(--gs-cp-t); border-bottom-color: var(--gs-cp); font-weight: var(--gs-weight-semibold); }
.gs-tab:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); border-radius: var(--gs-radius-xs); }
.gs-tab-panel { padding-top: var(--gs-space-5); }

/* Pill tabs */
.gs-tabs-pill {
  background: var(--gs-surface-2);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-full);
  padding: var(--gs-space-1);
  display: inline-flex;
  gap: 0;
  overflow: visible;
}
.gs-tabs-pill .gs-tab { border-radius: var(--gs-radius-full); border: none; margin: 0; padding: var(--gs-space-1_5) var(--gs-space-4); }
.gs-tabs-pill .gs-tab.active { background: var(--gs-surface-0); color: var(--gs-text-primary); box-shadow: var(--gs-shadow-sm); border: none; }

/* ── Breadcrumb ────────────────────────────────────────────── */
.gs-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gs-space-2);
  font-size: var(--gs-text-sm);
  color: var(--gs-text-tertiary);
  list-style: none;
  padding: 0;
  margin: 0;
}
.gs-breadcrumb li + li::before { content: '/'; margin-right: var(--gs-space-2); color: var(--gs-border-strong); }
.gs-breadcrumb a { color: var(--gs-text-tertiary); text-decoration: none; }
.gs-breadcrumb a:hover { color: var(--gs-cp-t); text-decoration: underline; }
.gs-breadcrumb [aria-current="page"] { color: var(--gs-text-primary); }

/* ── Divider ───────────────────────────────────────────────── */
.gs-divider {
  height: 1px;
  background: var(--gs-border-subtle);
  border: none;
  margin: 0;
}
.gs-divider-strong { background: var(--gs-border-default); }
.gs-divider-label {
  display: flex;
  align-items: center;
  gap: var(--gs-space-3);
  color: var(--gs-text-tertiary);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-medium);
  white-space: nowrap;
}
.gs-divider-label::before,
.gs-divider-label::after { content: ''; flex: 1; height: 1px; background: var(--gs-border-subtle); }

/* ── Skeleton loader ───────────────────────────────────────── */
.gs-skeleton {
  background: linear-gradient(90deg, var(--gs-bg-muted) 25%, var(--gs-bg-emphasis) 50%, var(--gs-bg-muted) 75%);
  background-size: 200% 100%;
  animation: gs-shimmer 1.5s linear infinite;
  border-radius: var(--gs-radius-sm);
  display: block;
}
.gs-skeleton-text   { height: 0.875rem; margin-bottom: var(--gs-space-2); }
.gs-skeleton-title  { height: 1.5rem;   margin-bottom: var(--gs-space-3); max-width: 60%; }
.gs-skeleton-btn    { height: 2.75rem;  border-radius: var(--gs-radius-btn); }
.gs-skeleton-avatar { border-radius: 50%; }
.gs-skeleton-card   { height: 10rem;   border-radius: var(--gs-radius-card); }

/* ── Tooltip ───────────────────────────────────────────────── */
.gs-tooltip-wrap { position: relative; display: inline-flex; }
.gs-tooltip {
  position: absolute;
  bottom: calc(100% + var(--gs-space-2));
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--gs-text-primary);
  color: var(--gs-bg-base);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-medium);
  padding: var(--gs-space-1_5) var(--gs-space-2_5);
  border-radius: var(--gs-radius-tooltip);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--gs-z-tooltip);
  box-shadow: var(--gs-shadow-md);
  opacity: 0;
  transition: opacity var(--gs-duration-fast) var(--gs-ease-out),
              transform var(--gs-duration-fast) var(--gs-ease-out);
}
.gs-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--gs-text-primary);
}
.gs-tooltip-wrap:hover .gs-tooltip,
.gs-tooltip-wrap:focus-within .gs-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Dropdown ──────────────────────────────────────────────── */
.gs-dropdown { position: relative; display: inline-block; }
.gs-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--gs-space-1_5));
  right: 0;
  min-width: 12rem;
  background: var(--gs-surface-0);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-dropdown);
  box-shadow: var(--gs-shadow-xl);
  padding: var(--gs-space-1_5) 0;
  z-index: var(--gs-z-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--gs-duration-normal) var(--gs-ease-out),
              transform var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-dropdown.open .gs-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.gs-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--gs-space-2_5);
  padding: var(--gs-space-2) var(--gs-space-4);
  font-size: var(--gs-text-sm);
  color: var(--gs-text-secondary);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background var(--gs-duration-fast), color var(--gs-duration-fast);
  line-height: var(--gs-leading-snug);
}
.gs-dropdown-item:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); text-decoration: none; }
.gs-dropdown-item-danger { color: var(--gs-status-error-icon); }
.gs-dropdown-item-danger:hover { background: var(--gs-status-error-bg); color: var(--gs-status-error-icon); }
.gs-dropdown-item:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); }
.gs-dropdown-divider { height: 1px; background: var(--gs-border-subtle); margin: var(--gs-space-1_5) 0; }
.gs-dropdown-header {
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-wider);
  color: var(--gs-text-tertiary);
  padding: var(--gs-space-1_5) var(--gs-space-4) var(--gs-space-1);
}

/* ── Empty state ───────────────────────────────────────────── */
.gs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gs-space-12) var(--gs-space-6);
  text-align: center;
  gap: var(--gs-space-2);
}
.gs-empty-icon  { font-size: var(--gs-size-icon-3xl); color: var(--gs-text-disabled); line-height: 1; }
.gs-empty-title { font-family: var(--gs-font-display); font-size: var(--gs-text-lg); font-weight: var(--gs-weight-bold); color: var(--gs-text-primary); margin: 0; }
.gs-empty-sub   { font-size: var(--gs-text-sm); color: var(--gs-text-tertiary); max-width: 20rem; line-height: var(--gs-leading-relaxed); }
.gs-empty-actions { margin-top: var(--gs-space-4); display: flex; gap: var(--gs-space-3); flex-wrap: wrap; justify-content: center; }

/* ── Status dot ────────────────────────────────────────────── */
.gs-dot     { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.gs-dot-g   { background: var(--gs-status-success-icon); }
.gs-dot-r   { background: var(--gs-status-error-icon);   }
.gs-dot-y   { background: var(--gs-status-warning-icon); }
.gs-dot-b   { background: var(--gs-status-info-icon);    }
.gs-dot-nt  { background: var(--gs-text-tertiary);        }
.gs-dot-p   { background: var(--gs-cp);                   }
.gs-dot-pulse { animation: gs-pulse-ring 2s var(--gs-ease-in-out) infinite; }

/* ── Tag cloud ─────────────────────────────────────────────── */
.gs-tag-cloud { display: flex; flex-wrap: wrap; gap: var(--gs-space-2); }
.gs-tag {
  padding: var(--gs-space-1_5) var(--gs-space-3);
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-full);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-medium);
  color: var(--gs-text-secondary);
  background: var(--gs-surface-1);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--gs-space-1);
  transition: var(--gs-transition-colors);
}
.gs-tag:hover { background: var(--gs-cp-s); border-color: var(--gs-cp-b); color: var(--gs-cp-t); text-decoration: none; }
.gs-tag.active { background: var(--gs-cp); border-color: var(--gs-cp); color: var(--gs-cp-fg); }

/* ── Icon-only button ──────────────────────────────────────── */
.gs-icon-btn {
  width: 2.25rem; height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-md);
  color: var(--gs-text-tertiary);
  cursor: pointer;
  font-size: var(--gs-size-icon-md);
  text-decoration: none;
  flex-shrink: 0;
  transition: var(--gs-transition-colors);
  position: relative;
}
.gs-icon-btn:hover { background: var(--gs-bg-muted); color: var(--gs-text-primary); text-decoration: none; }
.gs-icon-btn:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); }
.gs-icon-btn-sm { width: 2rem;    height: 2rem;    font-size: var(--gs-size-icon-sm); }
.gs-icon-btn-lg { width: 2.75rem; height: 2.75rem; font-size: var(--gs-size-icon-lg); }

/* ── Reading progress ──────────────────────────────────────── */
.gs-reading-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; background: var(--gs-cp); z-index: var(--gs-z-top);
  width: 0; transition: width 80ms linear;
}

/* ── Text / color helpers ──────────────────────────────────── */
.gs-text-primary-c   { color: var(--gs-text-primary)   !important; }
.gs-text-secondary-c { color: var(--gs-text-secondary) !important; }
.gs-text-tertiary-c  { color: var(--gs-text-tertiary)  !important; }
.gs-text-brand       { color: var(--gs-cp)             !important; }
.gs-text-success     { color: var(--gs-status-success-icon) !important; }
.gs-text-warning     { color: var(--gs-status-warning-icon) !important; }
.gs-text-error       { color: var(--gs-status-error-icon)   !important; }
.gs-text-white       { color: #fff !important; }

/* ── Background helpers ────────────────────────────────────── */
.gs-bg-primary   { background: var(--gs-cp)   !important; }
.gs-bg-secondary { background: var(--gs-cs)   !important; }
.gs-bg-success   { background: var(--gs-status-success-bg) !important; }
.gs-bg-warning   { background: var(--gs-status-warning-bg) !important; }
.gs-bg-error     { background: var(--gs-status-error-bg)   !important; }
.gs-bg-info      { background: var(--gs-status-info-bg)    !important; }
.gs-bg-muted-c   { background: var(--gs-bg-muted)   !important; }
.gs-bg-subtle-c  { background: var(--gs-bg-subtle)  !important; }
.gs-bg-surface-0 { background: var(--gs-surface-0)  !important; }
.gs-bg-surface-1 { background: var(--gs-surface-1)  !important; }
.gs-bg-surface-2 { background: var(--gs-surface-2)  !important; }

/* ── Border helpers ────────────────────────────────────────── */
.gs-border-default-c  { border-color: var(--gs-border-default) !important; }
.gs-border-primary-c  { border-color: var(--gs-cp)             !important; }
.gs-rounded           { border-radius: var(--gs-radius-lg)    !important; }
.gs-rounded-full      { border-radius: var(--gs-radius-full)  !important; }
.gs-rounded-none      { border-radius: 0                       !important; }

/* ── Shadow helpers ────────────────────────────────────────── */
.gs-shadow-xs-c { box-shadow: var(--gs-shadow-xs) !important; }
.gs-shadow-sm-c { box-shadow: var(--gs-shadow-sm) !important; }
.gs-shadow-md-c { box-shadow: var(--gs-shadow-md) !important; }
.gs-shadow-lg-c { box-shadow: var(--gs-shadow-lg) !important; }
.gs-shadow-none-c { box-shadow: none !important; }

/* ── Spacing helpers ───────────────────────────────────────── */
.gs-m-0  { margin: 0 !important; }
.gs-mt-0 { margin-top: 0 !important; }
.gs-mb-0 { margin-bottom: 0 !important; }
.gs-mt-2 { margin-top: var(--gs-space-2) !important; }
.gs-mt-4 { margin-top: var(--gs-space-4) !important; }
.gs-mt-6 { margin-top: var(--gs-space-6) !important; }
.gs-mt-8 { margin-top: var(--gs-space-8) !important; }
.gs-mb-2 { margin-bottom: var(--gs-space-2) !important; }
.gs-mb-4 { margin-bottom: var(--gs-space-4) !important; }
.gs-mb-6 { margin-bottom: var(--gs-space-6) !important; }
.gs-mb-8 { margin-bottom: var(--gs-space-8) !important; }
.gs-p-0  { padding: 0 !important; }
.gs-p-4  { padding: var(--gs-space-4)  !important; }
.gs-p-6  { padding: var(--gs-space-6)  !important; }
.gs-p-8  { padding: var(--gs-space-8)  !important; }
.gs-px-4 { padding-inline: var(--gs-space-4) !important; }
.gs-px-6 { padding-inline: var(--gs-space-6) !important; }
.gs-py-4 { padding-block:  var(--gs-space-4) !important; }
.gs-py-6 { padding-block:  var(--gs-space-6) !important; }
.gs-gap-2 { gap: var(--gs-space-2) !important; }
.gs-gap-3 { gap: var(--gs-space-3) !important; }
.gs-gap-4 { gap: var(--gs-space-4) !important; }
.gs-gap-6 { gap: var(--gs-space-6) !important; }

/* ── Display / layout helpers ──────────────────────────────── */
.gs-flex         { display: flex !important; }
.gs-inline-flex  { display: inline-flex !important; }
.gs-grid         { display: grid !important; }
.gs-block        { display: block !important; }
.gs-inline       { display: inline !important; }
.gs-hidden       { display: none !important; }
.gs-items-center { align-items: center !important; }
.gs-items-start  { align-items: flex-start !important; }
.gs-items-end    { align-items: flex-end !important; }
.gs-justify-between { justify-content: space-between !important; }
.gs-justify-center  { justify-content: center !important; }
.gs-justify-end     { justify-content: flex-end !important; }
.gs-flex-1          { flex: 1 !important; }
.gs-flex-wrap       { flex-wrap: wrap !important; }
.gs-flex-shrink-0   { flex-shrink: 0 !important; }
.gs-w-full          { width: 100% !important; }
.gs-min-w-0         { min-width: 0 !important; }
.gs-overflow-hidden { overflow: hidden !important; }
.gs-overflow-auto   { overflow: auto !important; }
.gs-relative        { position: relative !important; }
.gs-absolute        { position: absolute !important; }
.gs-truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gs-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gs-cursor-pointer  { cursor: pointer !important; }
.gs-select-none     { user-select: none !important; }

/* Responsive display helpers */
@media (max-width: 575.98px)  { .gs-hidden-xs { display: none !important; } }
@media (max-width: 767.98px)  { .gs-hidden-sm { display: none !important; } }
@media (max-width: 991.98px)  { .gs-hidden-md { display: none !important; } }
@media (min-width: 992px)     { .gs-hidden-lg { display: none !important; } }
@media (max-width: 575.98px)  { .gs-text-center-xs { text-align: center !important; } }


/* ============================================================
 * § 33 · ACCESSIBILITY
 * WCAG 2.1 AA — focus rings, skip link, screen-reader,
 * high-contrast, touch targets, reduced motion (§09)
 * ============================================================ */

/* Focus visible — consistent outline + box-shadow ring for all interactive elements.
 * The 2px outline-offset creates a visible gap between element and ring.
 * Custom gs-* components additionally use box-shadow (see §02/§03). */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gs-cp);
  outline-offset: 3px;
  border-radius: var(--gs-radius-xs);
}
/* gs-* interactive components use box-shadow (not outline) for focus rings.
 * Both approaches are WCAG 2.4.11 compliant. */

/* Skip link */
.gs-skip-link {
  position: absolute;
  top: -120%;
  left: var(--gs-space-4);
  z-index: var(--gs-z-top);
  background: var(--gs-cp);
  color: var(--gs-cp-fg);
  padding: var(--gs-space-3) var(--gs-space-5);
  border-radius: 0 0 var(--gs-radius-md) var(--gs-radius-md);
  font-family: var(--gs-font-display);
  font-size: var(--gs-text-sm);
  font-weight: var(--gs-weight-semibold);
  text-decoration: none;
  transition: top var(--gs-duration-fast) var(--gs-ease-out);
  box-shadow: var(--gs-shadow-lg);
}
.gs-skip-link:focus { top: 0; color: var(--gs-cp-fg); text-decoration: none; }

/* Screen-reader only (visually hidden) */
.gs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
.gs-sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }

/* High contrast mode support */
@media (forced-colors: active) {
  .gs-btn     { border: 2px solid ButtonText !important; }
  .gs-input,
  .gs-select,
  .gs-textarea { border: 2px solid ButtonText !important; }
  .gs-card    { border: 1px solid ButtonText !important; }
  .gs-badge   { border: 1px solid ButtonText !important; }
  .gs-sidebar-link.active { border-left: 3px solid Highlight !important; }
}

/* Touch targets — coarse pointer (mobile) */
@media (pointer: coarse) {
  .gs-btn            { min-height: 44px; }
  .gs-nav-link       { min-height: 44px; }
  .gs-sb-link        { min-height: 44px; }
  .gs-dropdown-item  { min-height: 44px; }
  .gs-tab            { min-height: 44px; }
  .gs-page-btn       { min-width: 44px; min-height: 44px; }
  .gs-check, .gs-radio { width: 1.25rem; height: 1.25rem; }
}

/* aria-busy loading indicator */
[aria-busy="true"]::after {
  content: '';
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: gs-spin 600ms linear infinite;
  margin-left: 0.5em;
  vertical-align: middle;
}


/* ============================================================
 * § 34 · PRINT STYLES
 * ============================================================ */

@media print {
  .gs-navbar,
  .gs-topbar,
  .gs-sidebar,
  .gs-footer,
  .gs-mega-menu,
  .gs-nav-drawer,
  .gs-overlay,
  .gs-modal-backdrop,
  .gs-toast-container,
  .gs-reading-progress,
  .gs-drawer,
  .gs-sb-overlay { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
    font-family: Georgia, serif;
  }
  .gs-dash-main { margin-left: 0 !important; }
  .gs-dash-layout { display: block !important; }
  .gs-card  { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  .gs-btn   { border: 1px solid currentColor !important; }
  .gs-table { min-width: 0 !important; }
  .gs-table-wrapper { overflow: visible !important; box-shadow: none !important; border: 1px solid #ccc; }

  a[href]::after  { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  a[href^="#"]::after,
  a[href^="javascript:"]::after { content: ""; }

  h1, h2, h3 { break-after: avoid; }
  table, figure { break-inside: avoid; }
}


/*
 * ============================================================
 * END OF GOJI.MY MASTER CSS FRAMEWORK  v1.0.0
 * ──────────────────────────────────────────────────────────
 * CSS Custom Properties:  273+
 * gs-* Component Classes: 400+
 * Themes:  Light (default) · Dark ([data-theme="dark"])
 * Compat:  Bootstrap 5.3 · WCAG 2.1 AA · Mobile-first
 * ============================================================
 */