@charset "UTF-8";
:root {
  --color-primary-100: #f1f8e9;
  --color-primary-200: #dcedc8;
  --color-primary-300: #c5e1a5;
  --color-primary-400: #aed581;
  --color-primary: #8bc34a;
  --color-primary-600: #7cb342;
  --color-primary-700: #689f38;
  --color-primary-800: #558b2f;
  --color-primary-900: #33691e;
  --color-secondary-100: #ffebee;
  --color-secondary-200: #ffcdd2;
  --color-secondary-300: #ef9a9a;
  --color-secondary-400: #e57373;
  --color-secondary: #e53935;
  --color-secondary-600: #e53935;
  --color-secondary-700: #d32f2f;
  --color-secondary-800: #c62828;
  --color-secondary-900: #b71c1c;
  --color-third-100: #dbeafe;
  --color-third-200: #bfdbfe;
  --color-third-300: #93c5fd;
  --color-third-400: #60a5fa;
  --color-third: #0d6efd;
  --color-third-600: #0b5ed7;
  --color-third-700: #0a58ca;
  --color-third-800: #1e40af;
  --color-third-900: #1e3a8a;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #fafafa;
  --color-neutral-300: #f5f5f5;
  --color-neutral-400: #e0e0e0;
  --color-neutral-500: #bdbdbd;
  --color-neutral-600: #999999;
  --color-neutral-700: #666666;
  --color-neutral-800: #444444;
  --color-neutral-900: #333333;
  --color-white: #ffffff;
  --color-primary-overlay: rgba(139, 195, 74, 0.9);
  --color-black: #333333;
  --color-text: #333333;
  --color-muted: #999999;
  --color-bg: #f5f5f5;
  --color-bg-light: #fafafa;
  --spacing-0: 0;
  --font-primary: Open Sans, sans-serif;
  --font-mono: Courier New, monospace;
  --fs-100: 0.625rem;
  --fs-200: 0.75rem;
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.25rem;
  --fs-700: 1.5rem;
  --fs-800: 1.875rem;
  --fs-900: 2.25rem;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.8;
  --size-100: 2px;
  --size-200: 4px;
  --size-300: 8px;
  --size-400: 16px;
  --size-500: 24px;
  --size-600: 32px;
  --size-700: 48px;
  --size-800: 64px;
  --size-900: 96px;
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 20px;
  --border-radius-pill: 100px;
  --border-color: #e0e0e0;
  --border-color-light: #f5f5f5;
  --border-color-focus: #8bc34a;
  --border-width: 1px;
  --border-style: solid;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --transition-fast: 0.15s ease;
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;
  --body-font-family: var(--font-primary);
  --body-font-size: var(--fs-400);
  --body-line-height: var(--line-height-base);
  --body-color: var(--color-text);
  --body-bg: var(--color-bg);
  --heading-font-family: var(--font-primary);
  --heading-font-weight: 700;
  --heading-line-height: var(--line-height-tight);
  --heading-color: var(--color-text);
  --heading-margin-bottom: var(--size-400);
  --h1-size: var(--fs-900);
  --h2-size: var(--fs-800);
  --h3-size: var(--fs-700);
  --h4-size: var(--fs-600);
  --h5-size: var(--fs-500);
  --h6-size: var(--fs-400);
  --link-color: var(--color-primary);
  --link-hover-color: var(--color-primary-700);
  --link-decoration: none;
  --link-hover-decoration: underline;
  --section-padding-y: 80px;
  --section-title-size: var(--fs-800);
  --section-title-weight: 700;
  --section-title-color: var(--color-text);
  --section-title-line-size: 100px;
  --section-title-line-h: 3px;
  --section-title-line-color: var(--color-primary);
  --section-title-mb: var(--size-300);
  --section-subtitle-size: var(--fs-500);
  --section-subtitle-color: var(--color-muted);
  --section-subtitle-mb: var(--size-700);
  --container-max-width: 1200px;
  --container-padding-x: var(--size-500);
  --header-bg: var(--color-neutral-100);
  --header-shadow: var(--shadow-sm);
  --header-height: 70px;
  --footer-bg: #2d2d2d;
  --footer-color: var(--color-neutral-400);
  --footer-heading-color: var(--color-neutral-100);
  --footer-link-color: var(--color-neutral-400);
  --footer-link-hover-color: var(--color-primary);
  --footer-border-color: var(--color-neutral-800);
  --footer-padding-y: var(--size-700);
  --main-bg: var(--color-bg-light);
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-cookie: 700;
  --z-tooltip: 800;
  --focus-ring-color: var(--color-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: solid;
  --scrollbar-width: 6px;
  --scrollbar-track-bg: var(--color-neutral-300);
  --scrollbar-thumb-bg: var(--color-neutral-500);
  --scrollbar-thumb-hover: var(--color-primary);
  --scrollbar-radius: var(--border-radius-pill);
  --selection-bg: var(--color-primary-200);
  --selection-color: var(--color-primary-900);
  --hr-color: var(--border-color);
  --hr-height: 1px;
  --hr-margin-y: var(--size-500);
  --paragraph-spacing: var(--size-400);
  --list-item-spacing: var(--size-200);
  --list-indent: var(--size-500);
  --blockquote-border-color: var(--color-primary);
  --blockquote-border-width: 4px;
  --blockquote-color: var(--color-neutral-700);
  --blockquote-bg: var(--color-neutral-200);
  --blockquote-padding: var(--size-400) var(--size-500);
  --blockquote-radius: var(--border-radius-sm);
  --blockquote-font-style: italic;
  --code-bg: var(--color-neutral-300);
  --code-color: var(--color-secondary-700);
  --code-padding: 2px 6px;
  --code-radius: var(--border-radius-sm);
  --code-size: var(--fs-300);
  --pre-bg: var(--color-neutral-900);
  --code-bracket-color: #ffd700;
  --pre-color: var(--color-neutral-200);
  --pre-padding: var(--size-500);
  --pre-radius: var(--border-radius);
  --section-padding-y-sm: 40px;
  --content-max-width: 72ch;
  --sidebar-width: 280px;
  --grid-gap: var(--size-500);
  --grid-gap-sm: var(--size-400);
  --form-gap: var(--size-400);
  --form-group-gap: 6px;
  --form-label-size: var(--fs-400);
  --form-label-weight: 600;
  --form-label-color: var(--color-neutral-900);
  --form-input-bg: var(--color-neutral-100);
  --form-input-color: var(--color-neutral-900);
  --form-input-border: var(--border-color);
  --form-input-radius: var(--border-radius-sm);
  --form-input-padding-x: 14px;
  --form-input-padding-y: 10px;
  --form-input-font-size: var(--fs-400);
  --form-input-placeholder: var(--color-neutral-600);
  --form-focus-border: var(--color-primary);
  --form-focus-shadow: 0 0 0 3px rgba(139, 195, 74, 0.15);
  --form-hint-size: var(--fs-200);
  --form-hint-color: var(--color-neutral-700);
  --form-error-color: var(--color-secondary);
  --form-disabled-opacity: 0.5;
  --form-disabled-bg: var(--color-neutral-300);
  --table-base-bg: var(--color-neutral-100);
  --table-base-border: var(--border-color);
  --table-base-radius: var(--border-radius);
  --table-base-shadow: var(--shadow-sm);
  --table-base-header-bg: var(--color-neutral-200);
  --table-base-header-color: var(--color-neutral-900);
  --table-base-header-weight: 600;
  --table-base-header-border: 2px solid var(--border-color);
  --table-base-cell-color: var(--color-neutral-700);
  --table-base-cell-padding-x: var(--size-400);
  --table-base-cell-padding-y: 12px;
  --table-base-font-size: var(--fs-400);
  --table-base-stripe-bg: var(--color-neutral-200);
  --table-base-hover-bg: var(--color-neutral-300);
  --table-base-row-border: var(--border-color);
  --table-row-highlighted-bg: #fff8e1;
}

:root {
  --btn-bg: var(--color-primary);
  --btn-color: var(--color-neutral-100);
  --btn-border: var(--color-primary);
  --btn-hover-bg: var(--color-primary-700);
  --btn-hover-border: var(--color-primary-700);
  --btn-hover-color: var(--color-neutral-100);
  --btn-inverse-bg: var(--color-neutral-100);
  --btn-inverse-color: var(--color-primary);
  --btn-inverse-border: var(--color-primary);
  --btn-danger-bg: var(--color-secondary);
  --btn-danger-border: var(--color-secondary);
  --btn-danger-hover-bg: var(--color-secondary-700);
  --btn-secondary-bg: transparent;
  --btn-secondary-color: var(--color-neutral-900);
  --btn-secondary-border: var(--color-neutral-400);
  --btn-padding-x: var(--size-500);
  --btn-padding-y: var(--size-300);
  --btn-font-size: var(--fs-400);
  --btn-font-weight: 600;
  --btn-radius: var(--border-radius);
  --btn-padding-x-sm: var(--size-400);
  --btn-padding-y-sm: 7px;
  --btn-font-size-sm: var(--fs-300);
  --btn-padding-x-lg: var(--size-700);
  --btn-padding-y-lg: 15px;
  --btn-font-size-lg: var(--fs-500);
  --btn-radius-pill: var(--border-radius-pill);
  --badge-bg: var(--color-neutral-300);
  --badge-color: var(--color-neutral-800);
  --badge-padding-x: var(--size-300);
  --badge-padding-y: var(--size-100);
  --badge-font-size: var(--fs-200);
  --badge-font-weight: 600;
  --badge-radius: var(--border-radius-pill);
  --alert-padding-x: var(--size-500);
  --alert-padding-y: var(--size-400);
  --alert-gap: 12px;
  --alert-margin-bottom: 12px;
  --alert-icon-size: 1.2rem;
  --alert-font-size: var(--fs-400);
  --alert-info-bg: #e3f2fd;
  --alert-info-border: var(--color-third);
  --alert-info-color: #0d47a1;
  --alert-warning-bg: #fff8e1;
  --alert-warning-border: #f9a825;
  --alert-warning-color: #e65100;
  --alert-padding-y: var(--size-400);
  --alert-border-radius: var(--border-radius-sm);
  --alert-border-width: 1px;
  --alert-font-size: var(--fs-400);
  --accordion-border-width: 0;
  --accordion-border-color: var(--border-color);
  --accordion-border-style: var(--border-style);
  --accordion-radius: var(--border-radius);
  --accordion-item-border-width: var(--border-width);
  --accordion-item-border-color: var(--border-color);
  --accordion-item-border-style: var(--border-style);
  --accordion-item-radius: var(--border-radius);
  --accordion-header-padding: var(--size-400) var(--size-500);
  --accordion-header-bg: transparent;
  --accordion-header-hover-bg: var(--color-neutral-300);
  --accordion-header-open-color: var(--color-primary-700);
  --accordion-header-open-bg: var(--color-primary-100);
  --accordion-icon-color: var(--color-neutral-600);
  --accordion-body-padding: 0 var(--size-500) var(--size-500);
  --accordion-body-color: var(--color-neutral-700);
  --accordion-font-size: var(--fs-400);
  --accordion-font-weight: 600;
  --breadcrumb-font-size: var(--fs-300);
  --breadcrumb-color: var(--color-neutral-600);
  --breadcrumb-hover-color: var(--color-primary);
  --breadcrumb-active-color: var(--color-neutral-900);
  --breadcrumb-separator-color: var(--color-neutral-400);
  --breadcrumb-pills-bg: var(--color-neutral-300);
  --breadcrumb-pills-radius: 20px;
  --breadcrumb-pills-active-bg: var(--color-neutral-100);
  --breadcrumb-pills-active-color: var(--color-primary-700);
  --stepper-indicator-size: 36px;
  --stepper-indicator-border: var(--color-neutral-400);
  --stepper-indicator-bg: var(--color-neutral-100);
  --stepper-indicator-color: var(--color-neutral-600);
  --stepper-label-font-size: var(--fs-300);
  --stepper-label-color: var(--color-neutral-600);
  --stepper-line-color: var(--color-neutral-300);
  --stepper-active-bg: var(--color-primary);
  --stepper-active-border: var(--color-primary);
  --stepper-active-color: var(--color-neutral-100);
  --stepper-active-label-color: var(--color-primary-700);
  --stepper-done-bg: var(--color-primary);
  --stepper-vert-gap: 14px;
  --stepper-vert-step-pb: 28px;
  --card-bg: var(--color-neutral-100);
  --card-bg-alt: var(--color-neutral-200);
  --card-border: var(--border-color);
  --card-radius: var(--border-radius);
  --card-shadow: var(--shadow);
  --card-shadow-hover: var(--shadow-md);
  --card-padding-service: 40px 30px;
  --card-icon-size: 64px;
  --card-icon-bg: var(--color-primary-100);
  --card-padding: var(--size-500);
  --card-font-size: var(--fs-400);
  --card-badge-bg: var(--color-primary-100);
  --card-badge-color: var(--color-primary-700);
  --card-badge-radius: 20px;
  --stat-card-gap: 16px;
  --stat-card-bg: var(--color-neutral-100);
  --stat-card-border: var(--border-color);
  --stat-card-radius: var(--border-radius);
  --stat-card-padding: var(--size-500);
  --stat-card-shadow: var(--shadow-sm);
  --stat-card-icon-bg: var(--color-primary-100);
  --stat-card-icon-color: var(--color-primary-700);
  --stat-card-icon-size: 48px;
  --stat-card-value-size: var(--fs-800);
  --stat-card-label-size: var(--fs-300);
  --stat-card-trend-size: var(--fs-200);
  --stat-card-trend-up: var(--color-primary-600);
  --stat-card-trend-down: var(--color-secondary);
  --stat-card-trend-flat: var(--color-neutral-500);
  --empty-state-padding: 48px 24px;
  --empty-state-gap: 12px;
  --empty-state-max-width: 360px;
  --empty-state-padding-lg: 64px 24px;
  --empty-state-icon-size-lg: 96px;
  --empty-state-padding-inline: 24px 16px;
  --empty-state-icon-size-inline: 48px;
  --empty-state-inline-gap: 16px;
  --empty-state-icon-bg: var(--color-neutral-300);
  --empty-state-icon-color: var(--color-neutral-500);
  --empty-state-icon-size: 72px;
  --empty-state-title-size: var(--fs-600);
  --empty-state-desc-size: var(--fs-400);
  --empty-state-desc-color: var(--color-neutral-600);
  --input-bg: var(--form-input-bg);
  --input-color: var(--form-input-color);
  --input-border: var(--form-input-border);
  --input-border-radius: var(--form-input-radius);
  --input-padding-x: var(--form-input-padding-x);
  --input-padding-y: var(--form-input-padding-y);
  --input-font-size: var(--form-input-font-size);
  --input-placeholder-color: var(--form-input-placeholder);
  --input-focus-border: var(--form-focus-border);
  --input-focus-shadow: var(--form-focus-shadow);
  --input-label-size: var(--form-label-size);
  --input-hint-size: var(--form-hint-size);
  --input-hint-color: var(--form-hint-color);
  --input-error-color: var(--form-error-color);
  --autocomplete-bg: var(--color-neutral-100);
  --autocomplete-border: var(--border-color);
  --autocomplete-radius: var(--border-radius);
  --autocomplete-shadow: var(--shadow-md);
  --autocomplete-item-hover-bg: var(--color-neutral-300);
  --autocomplete-active-bg: var(--color-primary-100);
  --autocomplete-active-color: var(--color-primary-700);
  --file-upload-border: var(--color-neutral-400);
  --file-upload-bg: var(--color-neutral-200);
  --file-upload-radius: var(--border-radius);
  --file-upload-hover-border: var(--color-primary-400);
  --file-upload-hover-bg: var(--color-primary-100);
  --file-upload-icon-color: var(--color-primary-600);
  --file-upload-item-border: var(--border-color);
  --file-upload-item-radius: var(--border-radius-sm);
  --file-upload-remove-hover: var(--color-secondary);
  --file-upload-focus-shadow: 0 0 0 4px rgba(139, 195, 74, 0.2);
  --range-slider-height: 6px;
  --range-slider-bg: var(--color-neutral-400);
  --range-slider-fill: var(--color-primary);
  --range-slider-thumb-size: 20px;
  --range-slider-thumb-shadow: var(--shadow-sm);
  --range-slider-value-color: var(--color-primary-700);
  --nav-font-size: var(--fs-400);
  --nav-font-weight: 600;
  --nav-gap: 4px;
  --nav-padding-x: 16px;
  --nav-padding-y: 8px;
  --nav-color: var(--color-neutral-700);
  --nav-hover-color: var(--color-primary);
  --nav-active-color: var(--color-primary);
  --nav-border-color: var(--border-color);
  --nav-pills-gap: 6px;
  --nav-pills-padding-x: 18px;
  --nav-pills-padding-y: 8px;
  --nav-pills-item-bg: var(--color-neutral-400);
  --nav-pills-item-color: var(--color-neutral-700);
  --nav-pills-active-bg: var(--color-primary);
  --nav-pills-active-color: var(--color-neutral-100);
  --nav-pills-radius: 20px;
  --nav-tabs-border: var(--border-color);
  --nav-tabs-padding-x: 20px;
  --nav-tabs-padding-y: 12px;
  --nav-tabs-filled-bg: var(--color-neutral-300);
  --nav-tabs-active-color: var(--color-primary);
  --nav-tabs-active-border: var(--color-primary);
  --nav-tabs-filled-active-bg: var(--color-primary);
  --nav-tabs-filled-active-color: var(--color-neutral-100);
  --menu-bg: var(--color-neutral-100);
  --menu-color: var(--color-neutral-700);
  --menu-hover-bg: var(--color-primary-100);
  --menu-hover-color: var(--color-primary-700);
  --menu-active-bg: var(--color-primary);
  --menu-active-color: var(--color-neutral-100);
  --menu-border: var(--border-color);
  --menu-radius: var(--border-radius);
  --menu-shadow: var(--shadow-md);
  --menu-font-size: var(--fs-400);
  --menu-padding-x: var(--size-400);
  --menu-padding-y: var(--size-300);
  --pagination-gap: 4px;
  --pagination-size: 36px;
  --pagination-radius: var(--border-radius-sm);
  --pagination-bg: var(--color-neutral-100);
  --pagination-border: var(--border-color);
  --pagination-color: var(--color-neutral-700);
  --pagination-hover-bg: var(--color-neutral-300);
  --pagination-active-bg: var(--color-primary);
  --pagination-active-border: var(--color-primary);
  --pagination-active-color: var(--color-neutral-100);
  --pagination-font-size: var(--fs-400);
  --modal-header-bg: var(--color-primary);
  --modal-header-color: var(--color-neutral-100);
  --modal-header-padding: var(--size-400) var(--size-500);
  --modal-body-padding: var(--size-500);
  --modal-title-size: var(--fs-700);
  --toast-bg: var(--color-neutral-100);
  --toast-color: var(--color-neutral-900);
  --toast-padding-x: var(--size-400);
  --toast-padding-y: 12px;
  --toast-radius: var(--border-radius);
  --toast-border-width: 4px;
  --toast-shadow: var(--shadow-md);
  --toast-font-size: var(--fs-400);
  --toast-min-width: 260px;
  --toast-max-width: 380px;
  --toast-success-border: var(--color-primary);
  --toast-success-icon: var(--color-primary);
  --toast-danger-border: var(--color-secondary);
  --toast-danger-icon: var(--color-secondary);
  --toast-info-border: var(--color-third);
  --toast-info-icon: var(--color-third);
  --toast-warning-border: #f59e0b;
  --toast-warning-icon: #f59e0b;
  --table-bg: var(--table-base-bg);
  --table-header-bg: var(--table-base-header-bg);
  --table-header-color: var(--table-base-header-color);
  --table-border: var(--table-base-border);
  --table-stripe-bg: var(--table-base-stripe-bg);
  --table-hover-bg: var(--table-base-hover-bg);
  --table-cell-color: var(--table-base-cell-color);
  --table-font-size: var(--table-base-font-size);
  --table-padding-x: var(--table-base-cell-padding-x);
  --table-padding-y: var(--table-base-cell-padding-y);
  --table-radius: var(--table-base-radius);
  --table-shadow: var(--table-base-shadow);
  --list-bg: var(--color-neutral-100);
  --list-border: var(--border-color);
  --list-radius: var(--border-radius);
  --list-shadow: var(--shadow-sm);
  --list-shadow-hover: var(--shadow-md);
  --list-padding: var(--size-400);
  --list-font-size: var(--fs-400);
  --list-color: var(--color-neutral-700);
  --list-title-color: var(--color-neutral-900);
  --list-active-bg: var(--color-primary-100);
  --list-active-color: var(--color-primary-700);
  --list-hover-bg: var(--color-neutral-200);
  --list-tag-bg: var(--color-primary-100);
  --list-tag-color: var(--color-primary-700);
  --list-tag-radius: var(--border-radius-pill);
  --gallery-gap: var(--size-200);
  --gallery-radius: var(--border-radius-sm);
  --gallery-overlay-bg: rgba(0, 0, 0, 0.45);
  --gallery-caption-bg: rgba(0, 0, 0, 0.55);
  --gallery-caption-color: var(--color-neutral-100);
  --gallery-nav-bg: rgba(0, 0, 0, 0.5);
  --gallery-nav-color: var(--color-neutral-100);
  --gallery-dot-bg: rgba(255, 255, 255, 0.5);
  --gallery-dot-active-bg: var(--color-neutral-100);
  --avatar-size: 40px;
  --avatar-bg: var(--color-primary-200);
  --avatar-color: var(--color-primary-800);
  --avatar-border: var(--color-neutral-100);
  --avatar-border-width: 2px;
  --avatar-radius: 50%;
  --avatar-font-size: var(--fs-300);
  --avatar-font-weight: 700;
  --avatar-group-overlap: -10px;
  --avatar-status-online: #22c55e;
  --avatar-status-away: #f59e0b;
  --avatar-status-offline: var(--color-neutral-400);
  --chip-bg: var(--color-neutral-300);
  --chip-color: var(--color-neutral-800);
  --chip-border: transparent;
  --chip-radius: 20px;
  --chip-padding-x: var(--size-300);
  --chip-padding-y: 4px;
  --chip-font-size: var(--fs-300);
  --chip-font-weight: 600;
  --chip-active-bg: var(--color-primary);
  --chip-active-color: var(--color-neutral-100);
  --poll-padding: var(--size-500);
  --poll-question-mb: var(--size-400);
  --poll-options-gap: 12px;
  --poll-bar-height: 8px;
  --poll-bar-bg: var(--color-neutral-400);
  --poll-bar-radius: var(--border-radius-sm);
  --poll-fill-bg: var(--color-neutral-500);
  --progress-height: 10px;
  --progress-bg: var(--color-neutral-400);
  --progress-radius: var(--border-radius-pill);
  --progress-fill-primary: var(--color-primary);
  --progress-fill-danger: var(--color-secondary);
  --progress-fill-info: var(--color-third);
  --progress-fill-warning: #f59e0b;
  --progress-label-size: var(--fs-200);
  --toggle-width: 44px;
  --toggle-height: 24px;
  --toggle-bg: var(--color-neutral-400);
  --toggle-active-bg: var(--color-primary);
  --toggle-thumb-size: 18px;
  --toggle-thumb-bg: var(--color-neutral-100);
  --toggle-thumb-shadow: var(--shadow-sm);
  --toggle-transition: var(--transition);
  --rating-gap: 4px;
  --rating-score-ml: 4px;
  --rating-color-empty: var(--color-neutral-400);
  --rating-color-filled: #f59e0b;
  --rating-font-size: var(--fs-500);
  --timeline-pl: 28px;
  --timeline-item-mb: 28px;
  --timeline-dot-bg-inactive: var(--color-neutral-500);
  --timeline-line-color: var(--color-neutral-400);
  --timeline-line-width: 2px;
  --timeline-dot-bg: var(--color-primary);
  --timeline-dot-border: var(--color-neutral-100);
  --timeline-dot-size: 14px;
  --timeline-content-bg: var(--color-neutral-100);
  --timeline-content-border: var(--border-color);
  --timeline-content-radius: var(--border-radius);
  --timeline-content-shadow: var(--shadow-sm);
  --timeline-meta-color: var(--color-neutral-600);
  --timeline-meta-size: var(--fs-300);
  --comment-bg: var(--color-neutral-200);
  --comment-border: var(--border-color);
  --comment-radius: var(--border-radius);
  --comment-padding: var(--size-400);
  --comment-meta-color: var(--color-neutral-600);
  --comment-meta-size: var(--fs-300);
  --comment-reply-indent: var(--size-600);
  --cookie-bar-gap: 16px;
  --cookie-bar-bg: var(--color-neutral-900);
  --cookie-bar-color: var(--color-neutral-300);
  --cookie-bar-icon-color: var(--color-primary-400);
  --cookie-bar-link-color: var(--color-primary-400);
  --cookie-bar-padding: var(--size-400) var(--size-500);
  --cookie-bar-shadow: var(--shadow-lg);
  --cookie-bar-z-index: var(--z-cookie);
  --sticky-cta-gap: 20px;
  --sticky-cta-bg: var(--color-neutral-900);
  --sticky-cta-color: var(--color-neutral-100);
  --sticky-cta-padding: 12px var(--size-500);
  --sticky-cta-shadow: var(--shadow-lg);
  --sticky-cta-z-index: var(--z-cookie);
  --login-card-bg: var(--color-neutral-100);
  --login-card-shadow: var(--shadow-lg);
  --login-card-radius: var(--border-radius-lg);
  --login-card-padding: var(--size-700);
  --login-divider-color: var(--border-color);
  --login-divider-text-color: var(--color-neutral-600);
  --login-seznam-bg: #cc0000;
  --login-seznam-hover-bg: #a80000;
}

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

html {
  scroll-behavior: smooth;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}

body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--body-color);
  background: var(--body-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  margin-bottom: var(--heading-margin-bottom);
  color: var(--heading-color);
}

h1 {
  font-size: var(--h1-size);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
}

h4 {
  font-size: var(--h4-size);
}

h5 {
  font-size: var(--h5-size);
}

h6 {
  font-size: var(--h6-size);
}

p {
  margin-bottom: var(--size-400);
}
p:last-child {
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
}

strong {
  font-weight: 700;
}

a {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
  transition: color var(--transition);
}
a:hover {
  color: var(--link-hover-color);
  text-decoration: var(--link-hover-decoration);
}

.section-title {
  text-align: center;
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  color: var(--section-title-color);
  margin-bottom: var(--section-title-mb);
}
.section-title::after {
  content: "";
  display: block;
  width: var(--section-title-line-size);
  height: var(--section-title-line-h);
  background: var(--section-title-line-color);
  margin: var(--size-400) auto 0;
}

.section-subtitle {
  text-align: center;
  font-size: var(--section-subtitle-size);
  color: var(--section-subtitle-color);
  margin-bottom: var(--section-subtitle-mb);
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}

hr {
  border: none;
  border-top: var(--hr-height) solid var(--hr-color);
  margin: var(--hr-margin-y) 0;
}

blockquote {
  border-left: var(--blockquote-border-width) solid var(--blockquote-border-color);
  background: var(--blockquote-bg);
  color: var(--blockquote-color);
  padding: var(--blockquote-padding);
  border-radius: 0 var(--blockquote-radius) var(--blockquote-radius) 0;
  font-style: var(--blockquote-font-style);
  margin: var(--paragraph-spacing) 0;
}

code {
  background: var(--code-bg);
  color: var(--code-color);
  padding: var(--code-padding);
  border-radius: var(--code-radius);
  font-size: var(--code-size);
  font-family: var(--font-mono);
}

pre {
  background: var(--pre-bg);
  color: var(--pre-color);
  padding: var(--pre-padding);
  border-radius: var(--pre-radius);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--code-size);
}
pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

article ul, article ol, .prose ul, .prose ol {
  padding-left: var(--list-indent);
  margin-bottom: var(--paragraph-spacing);
}
article ul li + li, article ol li + li, .prose ul li + li, .prose ol li + li {
  margin-top: var(--list-item-spacing);
}
article ul, .prose ul {
  list-style: disc;
}
article ol, .prose ol {
  list-style: decimal;
}

::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--scrollbar-radius);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

* {
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.accordion {
  border: var(--accordion-border-width) var(--accordion-border-style) var(--accordion-border-color);
  border-radius: var(--accordion-radius);
  overflow: hidden;
}
.accordion .accordion-item {
  border-bottom: var(--accordion-item-border-width) var(--accordion-item-border-style) var(--accordion-item-border-color);
}
.accordion .accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}
.accordion .accordion-item.open .accordion-body {
  display: block;
}
.accordion .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--accordion-header-padding);
  background: var(--accordion-header-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--size-400);
  font-family: var(--font-primary);
  font-size: var(--accordion-font-size);
  font-weight: var(--accordion-font-weight);
  color: var(--color-neutral-900);
  transition: background var(--transition);
}
.accordion-item.open .accordion .accordion-header {
  color: var(--accordion-header-open-color);
  background: var(--accordion-header-open-bg);
}
.accordion .accordion-icon {
  flex-shrink: 0;
  color: var(--accordion-icon-color);
  transition: transform var(--transition-slow);
}
.accordion-item.open .accordion .accordion-icon {
  color: var(--color-primary-600);
}
.accordion .accordion-body {
  padding: var(--accordion-body-padding);
  font-size: var(--accordion-font-size);
  color: var(--accordion-body-color);
  line-height: var(--line-height-relaxed);
}
.accordion--flush {
  border: none;
  border-radius: 0;
}
.accordion--flush .accordion-item {
  border-bottom: var(--accordion-border-width) var(--accordion-border-style) var(--accordion-border-color);
}
.accordion--flush .accordion-header {
  padding: var(--size-400) var(--size-500);
}
.accordion--flush .accordion-body {
  padding: 0 var(--size-500) var(--size-500);
}
.accordion--bordered {
  border: none;
  gap: var(--size-300);
  display: flex;
  flex-direction: column;
}
.accordion--bordered .accordion-item {
  border: var(--accordion-item-border-width) var(--accordion-item-border-style) var(--accordion-item-border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}
.accordion--bordered .accordion-item.open {
  border-color: var(--color-primary-400);
}

.alert-custom {
  display: flex;
  align-items: flex-start;
  gap: var(--alert-gap);
  padding: var(--alert-padding-y) var(--alert-padding-x);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--alert-margin-bottom);
  border: 1px solid transparent;
}
.alert-custom .alert-icon {
  font-size: var(--alert-icon-size);
  flex-shrink: 0;
  margin-top: 1px;
}
.alert-custom .alert-body {
  flex: 1;
}
.alert-custom .alert-title {
  font-weight: 600;
  font-size: var(--alert-font-size);
  margin-bottom: 2px;
}
.alert-custom .alert-text {
  font-size: var(--alert-font-size);
  margin: 0;
}
.alert-custom.success {
  background: var(--color-primary-100);
  border-color: var(--color-primary);
  color: var(--color-primary-900);
}
.alert-custom.info {
  background: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-color);
}
.alert-custom.warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-color);
}
.alert-custom.danger {
  background: var(--color-secondary-100);
  border-color: var(--color-secondary);
  color: var(--color-secondary-900);
}

.autocomplete {
  position: relative;
  width: 100%;
}
.autocomplete .autocomplete-input {
  width: 100%;
  padding: var(--form-input-padding-y) 36px var(--form-input-padding-y) var(--form-input-padding-x);
  font-family: var(--font-primary);
  font-size: var(--fs-400);
  color: var(--color-neutral-900);
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-input-radius);
  outline: none;
  transition: border-color box-shadow 0.2s ease;
  -webkit-transition: border-color box-shadow 0.2s ease;
  -moz-transition: border-color box-shadow 0.2s ease;
}
.autocomplete .autocomplete-input:focus {
  border-color: var(--form-focus-border);
  box-shadow: var(--form-focus-shadow);
}
.autocomplete .autocomplete-input::placeholder {
  color: var(--color-neutral-600);
}
.autocomplete .autocomplete-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-600);
  pointer-events: none;
}
.autocomplete .autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-input-radius);
  z-index: var(--z-sticky);
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.autocomplete .autocomplete-dropdown:empty {
  display: none;
}
.autocomplete .autocomplete-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-transition: background 0.15s ease;
  -moz-transition: background 0.15s ease;
}
.autocomplete .autocomplete-item:hover, .autocomplete .autocomplete-item.active {
  background: var(--color-neutral-300);
  color: var(--color-neutral-900);
}
.autocomplete .autocomplete-item img {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.autocomplete .autocomplete-item .autocomplete-item-label {
  flex: 1;
}
.autocomplete .autocomplete-item .autocomplete-item-label mark {
  background: transparent;
  color: var(--color-primary-700);
  font-weight: 600;
  padding: 0;
}
.autocomplete .autocomplete-item .autocomplete-item-meta {
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
}
.autocomplete .autocomplete-empty {
  padding: 14px;
  font-size: var(--fs-400);
  color: var(--color-neutral-600);
  text-align: center;
}

.autocomplete.window {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--border-radius);
  z-index: var(--z-fixed);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.autocomplete.window .aw-section {
  padding: 8px 0;
}
.autocomplete.window .aw-section + .aw-section {
  border-top: 1px solid var(--color-neutral-400);
}
.autocomplete.window .aw-section-title {
  padding: 4px 14px 6px;
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--color-neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.autocomplete.window .aw-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-transition: background 0.15s ease;
  -moz-transition: background 0.15s ease;
}
.autocomplete.window .aw-item:hover, .autocomplete.window .aw-item.active {
  background: var(--color-neutral-300);
}
.autocomplete.window .aw-item .aw-item-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  flex-shrink: 0;
  background: var(--color-neutral-400);
}
.autocomplete.window .aw-item .aw-item-body {
  flex: 1;
  min-width: 0;
}
.autocomplete.window .aw-item .aw-item-title {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-900);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.autocomplete.window .aw-item .aw-item-title mark {
  background: transparent;
  color: var(--color-primary-700);
  font-weight: 700;
  padding: 0;
}
.autocomplete.window .aw-item .aw-item-meta {
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
  margin-top: 2px;
}
.autocomplete.window .aw-item .aw-item-price {
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--color-neutral-900);
  white-space: nowrap;
}
.autocomplete.window .aw-item .aw-item-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--border-radius-xl);
  font-size: var(--fs-200);
  font-weight: 600;
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}
.autocomplete.window .aw-footer {
  border-top: 1px solid var(--color-neutral-400);
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  text-align: center;
}
.autocomplete.window .aw-footer a {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-primary-700);
  text-decoration: none;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.autocomplete.window .aw-footer a:hover {
  color: var(--color-primary);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--avatar-radius);
  overflow: hidden;
  background: var(--avatar-bg);
  color: var(--avatar-color);
  font-size: var(--avatar-font-size);
  font-weight: var(--avatar-font-weight);
  flex-shrink: 0;
  border: var(--avatar-border-width) solid var(--avatar-border);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar--xs {
  width: var(--avatar-size-xs);
  height: var(--avatar-size-xs);
  font-size: var(--fs-200);
}
.avatar--sm {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  font-size: var(--fs-200);
}
.avatar--lg {
  width: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
  font-size: var(--fs-500);
}
.avatar--xl {
  width: var(--avatar-size-xl);
  height: var(--avatar-size-xl);
  font-size: var(--fs-600);
}
.avatar--green {
  background: var(--color-primary-200);
  color: var(--color-primary-800);
}
.avatar--red {
  background: var(--color-secondary-100);
  color: var(--color-secondary-700);
}
.avatar--blue {
  background: var(--color-third-100);
  color: var(--color-third-700);
}
.avatar--grey {
  background: var(--color-neutral-400);
  color: var(--color-neutral-700);
}
.avatar--square {
  border-radius: var(--border-radius);
}
.avatar--online, .avatar--offline, .avatar--away {
  position: relative;
}
.avatar--online::after, .avatar--offline::after, .avatar--away::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--avatar-border);
}
.avatar--online::after {
  background: var(--avatar-online-color);
}
.avatar--offline::after {
  background: var(--avatar-offline-color);
}
.avatar--away::after {
  background: var(--avatar-away-color);
}

.avatar-group {
  display: flex;
  align-items: center;
}
.avatar-group .avatar {
  margin-left: var(--avatar-group-offset);
  transition: transform var(--transition);
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}
.avatar-group .avatar:hover {
  transform: translateY(-4px);
  z-index: var(--z-raised);
}
.avatar-group--sm .avatar {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  margin-left: -8px;
}
.avatar-group--lg .avatar {
  width: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
  margin-left: -14px;
}
.avatar-group .avatar--more {
  background: var(--color-neutral-300);
  color: var(--color-neutral-700);
  font-size: var(--fs-200);
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding-y) var(--badge-padding-x);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  border-radius: var(--badge-radius);
  background: var(--badge-bg);
  color: var(--badge-color);
  white-space: nowrap;
  line-height: 1;
}
.badge.badge-primary {
  background: var(--color-primary);
  color: var(--color-neutral-100);
}
.badge.badge-secondary {
  background: var(--color-secondary);
  color: var(--color-neutral-100);
}
.badge.badge-info {
  background: var(--color-third);
  color: var(--color-neutral-100);
}
.badge.badge-light {
  background: var(--color-neutral-300);
  color: var(--color-neutral-800);
}
.badge.badge-dark {
  background: var(--color-neutral-900);
  color: var(--color-neutral-100);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
  text-decoration: none;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.breadcrumb .breadcrumb-item:hover {
  color: var(--color-primary);
}
.breadcrumb .breadcrumb-item.active {
  color: var(--color-neutral-900);
  cursor: default;
}
.breadcrumb .breadcrumb-item i {
  font-size: var(--fs-400);
  margin-right: 4px;
}
.breadcrumb .breadcrumb-item:not(:last-child)::after {
  content: "/";
  display: inline-block;
  padding: 0 8px;
  color: var(--color-neutral-400);
  cursor: default;
  color: var(--color-neutral-400) !important;
}
.breadcrumb--arrow .breadcrumb-item:not(:last-child)::after {
  content: "›";
  font-size: var(--fs-500);
  line-height: 1;
  padding: 0 6px;
  color: var(--color-neutral-400) !important;
}
.breadcrumb--pills {
  background: var(--color-neutral-300);
  padding: 4px;
  border-radius: var(--border-radius-xl);
  gap: 2px;
}
.breadcrumb--pills .breadcrumb-item {
  padding: 4px 12px;
  border-radius: 16px;
}
.breadcrumb--pills .breadcrumb-item:not(:last-child)::after {
  display: none;
}
.breadcrumb--pills .breadcrumb-item.active {
  background: var(--color-neutral-100);
  color: var(--color-primary-700);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn.btn-link, .btn.btn-secondary-inverse, .btn.btn-danger-inverse, .btn.btn-danger.btn-custom, .btn.btn-success-inverse, .btn.btn-success-inverse.btn-custom, .btn.btn-custom, .btn.btn-success.btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-200);
  font-family: var(--font-primary);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn.btn-link:focus-visible, .btn.btn-secondary-inverse:focus-visible, .btn.btn-danger-inverse:focus-visible, .btn.btn-success-inverse:focus-visible, .btn.btn-custom:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.btn.btn-link:active, .btn.btn-secondary-inverse:active, .btn.btn-danger-inverse:active, .btn.btn-success-inverse:active, .btn.btn-custom:active {
  transform: translateY(1px);
}

.btn.btn-custom, .btn.btn-success.btn-custom {
  background: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  border-color: var(--btn-border) !important;
}
.btn.btn-custom:hover, .btn.btn-custom:focus {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
  color: var(--btn-hover-color) !important;
  transform: translateY(-1px);
}
.btn.btn-custom:active {
  transform: translateY(0);
}

.btn.btn-success-inverse, .btn.btn-success-inverse.btn-custom {
  background: var(--btn-inverse-bg) !important;
  color: var(--btn-inverse-color) !important;
  border-color: var(--btn-inverse-border) !important;
}
.btn.btn-success-inverse:hover, .btn.btn-success-inverse:focus {
  background: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  border-color: var(--btn-border) !important;
  transform: translateY(-1px);
}
.btn.btn-success-inverse:active {
  transform: translateY(0);
}

.btn.btn-danger.btn-custom {
  background: var(--btn-danger-bg) !important;
  color: var(--btn-color) !important;
  border-color: var(--btn-danger-border) !important;
}
.btn.btn-danger.btn-custom:hover, .btn.btn-danger.btn-custom:focus {
  background: var(--btn-danger-hover-bg) !important;
  border-color: var(--btn-danger-hover-bg) !important;
  color: var(--btn-color) !important;
  transform: translateY(-1px);
}
.btn.btn-danger.btn-custom:active {
  transform: translateY(0);
}

.btn.btn-danger-inverse {
  background: var(--btn-inverse-bg) !important;
  color: var(--btn-danger-bg) !important;
  border-color: var(--btn-danger-border) !important;
}
.btn.btn-danger-inverse:hover, .btn.btn-danger-inverse:focus {
  background: var(--btn-danger-bg) !important;
  color: var(--btn-color) !important;
  border-color: var(--btn-danger-border) !important;
  transform: translateY(-1px);
}
.btn.btn-danger-inverse:active {
  transform: translateY(0);
}

.btn.btn-secondary-inverse {
  background: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  border-color: var(--color-neutral-400) !important;
}
.btn.btn-secondary-inverse:hover, .btn.btn-secondary-inverse:focus {
  background: var(--btn-hover-bg) !important;
  border-color: var(--color-neutral-400) !important;
  color: var(--btn-color) !important;
  transform: translateY(-1px);
}
.btn.btn-secondary-inverse:active {
  transform: translateY(0);
}

.btn.btn-secondary.dark, .btn.btn-secondary.btn-custom {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
  border-color: var(--btn-secondary-border) !important;
}
.btn.btn-secondary.dark:hover, .btn.btn-secondary.dark:focus, .btn.btn-secondary.btn-custom:hover, .btn.btn-secondary.btn-custom:focus {
  border-color: var(--color-neutral-700) !important;
  background: var(--color-neutral-300) !important;
}
.btn.btn-secondary.dark:active, .btn.btn-secondary.btn-custom:active {
  background: var(--color-neutral-400) !important;
}
.btn.btn-link {
  background: transparent !important;
  color: var(--color-primary-700) !important;
  border-color: transparent !important;
  padding-left: var(--size-200);
  padding-right: var(--size-200);
}
.btn.btn-link:hover, .btn.btn-link:focus {
  color: var(--color-primary) !important;
  text-decoration: underline;
  background: transparent !important;
}
.btn.btn-rounded {
  border-radius: var(--btn-radius-pill) !important;
  padding-left: var(--btn-padding-x-lg) !important;
  padding-right: var(--btn-padding-x-lg) !important;
}
.btn.btn-sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm) !important;
  font-size: var(--btn-font-size-sm) !important;
}
.btn.btn-lg {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg) !important;
  font-size: var(--btn-font-size-lg) !important;
}

.card {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  transition: all var(--transition-slow);
  height: 100%;
}
.card.service {
  background: var(--card-bg);
  padding: var(--card-padding-service);
  text-align: center;
}
.card.service:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
}
.card.service .card-icon {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  margin: 0 auto var(--size-400);
  background: var(--card-icon-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.card.service h3 {
  font-size: var(--fs-600);
  margin-bottom: var(--size-300);
}
.card.service p {
  color: var(--color-neutral-700);
  font-size: var(--fs-400);
  margin: 0;
}
.card.product {
  background: var(--card-bg-alt);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card.product:hover {
  box-shadow: var(--card-shadow-hover);
}
.card.product .card-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.card.product .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card.product .card-body {
  padding: var(--card-padding);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card.product .card-badge {
  display: inline-block;
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  padding: 4px 14px;
  border-radius: var(--border-radius-xl);
  font-size: var(--fs-300);
  font-weight: 600;
  margin-bottom: var(--size-300);
  align-self: flex-start;
}
.card.product h3 {
  font-size: var(--fs-700);
  margin-bottom: var(--size-300);
}
.card.product p {
  color: var(--color-neutral-700);
  margin-bottom: var(--size-400);
  flex: 1;
}
.card.product .card-price {
  font-size: var(--fs-700);
  font-weight: 700;
  margin-bottom: var(--size-400);
  margin-top: var(--size-300);
}
.card.tech {
  background: var(--card-bg);
  padding: var(--size-400);
  text-align: center;
}
.card.tech:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
}
.card.tech .card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--size-200);
}
.card.tech span {
  display: block;
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  font-weight: 600;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--size-200);
  padding: var(--chip-padding-y) var(--chip-padding-x);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  color: var(--chip-color);
  font-size: var(--chip-font-size);
  font-weight: var(--chip-font-weight);
  border: 1px solid var(--chip-border);
  cursor: default;
  transition: all var(--transition-fast);
}
.chip .chip-label {
  line-height: 1.4;
}
.chip--clickable {
  cursor: pointer;
}
.chip--clickable:hover {
  background: var(--color-neutral-400);
}
.chip--active, .chip.active {
  background: var(--chip-active-bg);
  color: var(--chip-active-color);
  border-color: var(--chip-active-bg);
}
.chip--removable {
  padding-right: var(--size-200);
}
.chip .chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 9px;
  color: inherit;
  transition: background var(--transition-fast);
}
.chip .chip-remove:hover {
  background: rgba(0, 0, 0, 0.25);
}
.chip--green {
  background: var(--chip-primary-bg);
  color: var(--chip-primary-color);
  border-color: var(--chip-primary-border);
}
.chip--red {
  background: var(--chip-danger-bg);
  color: var(--chip-danger-color);
  border-color: var(--chip-danger-border);
}
.chip--blue {
  background: var(--chip-info-bg);
  color: var(--chip-info-color);
  border-color: var(--chip-info-border);
}
.chip--sm {
  padding: var(--size-100) var(--size-200);
  font-size: var(--fs-200);
}
.chip--lg {
  padding: var(--size-200) var(--size-400);
  font-size: var(--fs-400);
}

.chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-200);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  min-height: 44px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.chip-input:focus-within {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}
.chip-input .chip-input-field {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--input-font-size);
  color: var(--input-color);
  flex: 1;
  min-width: 100px;
}
.chip-input .chip-input-field::placeholder {
  color: var(--input-placeholder);
}

.comments {
  margin-top: var(--section-padding-y);
}
.comments .comments-title {
  font-size: var(--fs-700);
  font-weight: 700;
  margin-bottom: var(--size-500);
  padding-bottom: var(--size-400);
  border-bottom: 2px solid var(--comment-border);
}
.comments .comments-list {
  margin-bottom: var(--size-600);
}
.comments .comments-form {
  background: var(--comment-bg);
  border-radius: var(--border-radius);
  padding: var(--comment-padding);
}
.comments .comments-form .comments-form-title {
  font-size: var(--fs-600);
  font-weight: 600;
  margin-bottom: var(--size-400);
}

.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-cookie);
  background: var(--color-neutral-900);
  color: var(--color-neutral-100);
  padding: var(--cookie-bar-padding);
  display: flex;
  align-items: center;
  gap: var(--cookie-bar-gap);
  flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease;
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
}
.cookie-bar.hidden {
  transform: translateY(100%);
}
.cookie-bar--top {
  top: 0;
  bottom: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.cookie-bar--top.hidden {
  transform: translateY(-100%);
}
.cookie-bar .cookie-bar-content {
  display: flex;
  align-items: flex-start;
  gap: var(--size-300);
  flex: 1;
  min-width: 240px;
}
.cookie-bar .cookie-bar-icon {
  font-size: var(--fs-500);
  color: var(--cookie-bar-icon-color);
  flex-shrink: 0;
  margin-top: 2px;
}
.cookie-bar .cookie-bar-text {
  font-size: var(--fs-300);
  color: var(--cookie-bar-color);
  margin: 0;
  line-height: var(--line-height-relaxed);
}
.cookie-bar .cookie-bar-text a {
  color: var(--cookie-bar-link-color);
  text-decoration: underline;
}
.cookie-bar .cookie-bar-text a:hover {
  color: var(--color-primary-300);
}
.cookie-bar .cookie-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--size-200);
  flex-shrink: 0;
}

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-cookie);
  background: var(--sticky-cta-bg);
  padding: var(--sticky-cta-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sticky-cta-gap);
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s ease;
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
}
.sticky-cta.hidden {
  transform: translateY(100%);
}
.sticky-cta .sticky-cta-text {
  font-size: var(--fs-400);
  color: var(--sticky-cta-color);
  font-weight: 600;
}
.sticky-cta .sticky-cta-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-neutral-500);
  cursor: pointer;
  font-size: var(--fs-400);
  padding: 4px;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.sticky-cta .sticky-cta-close:hover {
  color: var(--color-neutral-100);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--empty-state-padding);
  gap: var(--empty-state-gap);
}
.empty-state .empty-state-icon {
  width: var(--empty-state-icon-size);
  height: var(--empty-state-icon-size);
  border-radius: 50%;
  background: var(--empty-state-icon-bg);
  color: var(--empty-state-icon-color);
  font-size: var(--fs-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.empty-state .empty-state-title {
  font-size: var(--empty-state-title-size);
  font-weight: 700;
  color: var(--color-neutral-900);
  margin: 0;
}
.empty-state .empty-state-desc {
  font-size: var(--empty-state-desc-size);
  color: var(--empty-state-desc-color);
  max-width: var(--empty-state-max-width);
  margin: 0;
  line-height: var(--line-height-relaxed);
}
.empty-state--lg {
  padding: var(--empty-state-padding-lg);
}
.empty-state--lg .empty-state-icon {
  width: var(--empty-state-icon-size-lg);
  height: var(--empty-state-icon-size-lg);
  font-size: var(--fs-700);
}
.empty-state--inline {
  padding: var(--empty-state-padding-inline);
  flex-direction: row;
  text-align: left;
  gap: var(--empty-state-inline-gap);
}
.empty-state--inline .empty-state-icon {
  width: var(--empty-state-icon-size-inline);
  height: var(--empty-state-icon-size-inline);
  font-size: var(--fs-500);
  flex-shrink: 0;
  margin-bottom: 0;
}
.empty-state--inline .empty-state-body {
  flex: 1;
}

.fake-table {
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.fake-table .ft-head {
  background: var(--table-base-header-bg);
}
.fake-table .ft-head .ft-row {
  border-bottom: var(--table-base-header-border);
}
.fake-table .ft-head .ft-row:hover {
  background: transparent;
}
.fake-table .ft-head .ft-cell {
  font-weight: 600;
  color: var(--color-neutral-900);
  padding: var(--table-base-cell-padding-y) var(--table-base-cell-padding-x);
}
.fake-table .ft-body {
  background: var(--table-base-bg);
}
.fake-table .ft-body .ft-row:last-child {
  border-bottom: none;
}
.fake-table .ft-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--table-base-row-border);
  transition: background 0.2s ease;
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
}
.fake-table .ft-row:hover {
  background: var(--table-base-hover-bg);
}
.fake-table .ft-row.active {
  background: var(--color-primary-100);
}
.fake-table .ft-row.highlighted {
  background: var(--table-row-highlighted-bg);
}
.fake-table .ft-cell {
  flex: 1;
  padding: var(--table-base-cell-padding-y) var(--table-base-cell-padding-x);
  font-size: var(--fs-400);
  color: var(--table-base-cell-color);
}
.fake-table .ft-cell.ft-cell--shrink {
  flex: 0 0 auto;
}
.fake-table .ft-cell.ft-cell--bold {
  font-weight: 600;
  color: var(--color-neutral-900);
}
.fake-table .ft-cell.ft-cell--right {
  text-align: right;
}
.fake-table .ft-cell.ft-cell--center {
  text-align: center;
}
.fake-table .ft-cell.ft-cell--img img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  display: block;
}
@media screen and (max-width: 767.98px) {
  .fake-table .ft-head {
    display: none;
  }
  .fake-table .ft-row {
    flex-wrap: wrap;
    padding: 8px 0;
  }
  .fake-table .ft-cell {
    flex: 0 0 100%;
    padding: 6px 16px;
  }
  .fake-table .ft-cell::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--color-neutral-900);
  }
  .fake-table .ft-cell.ft-cell--img {
    flex: 0 0 auto;
  }
}

.file-upload {
  width: 100%;
}
.file-upload .file-upload-input {
  display: none;
}
.file-upload .file-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 24px;
  border: 2px dashed var(--color-neutral-400);
  border-radius: 10px;
  background: var(--color-neutral-200);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.file-upload .file-upload-zone:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-100);
}
.file-upload.dragover .file-upload-zone {
  border-color: var(--color-primary);
  background: var(--color-primary-100);
  box-shadow: var(--file-upload-focus-shadow);
}
.file-upload .file-upload-icon {
  font-size: var(--fs-700);
  color: var(--color-neutral-500);
}
.dragover .file-upload .file-upload-icon {
  color: var(--color-primary);
}
.file-upload .file-upload-title {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-800);
}
.file-upload .file-upload-desc {
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
}
.file-upload .file-upload-link {
  color: var(--color-primary-600);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}
.file-upload .file-upload-link:hover {
  color: var(--color-primary-700);
}
.file-upload .file-upload-hint {
  font-size: var(--fs-200);
  color: var(--color-neutral-500);
  margin-top: 4px;
}
.file-upload .file-upload-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.file-upload .file-upload-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-input-radius);
}
.file-upload .file-upload-item .file-upload-item-icon {
  color: var(--color-primary-600);
  font-size: var(--fs-400);
  flex-shrink: 0;
}
.file-upload .file-upload-item .file-upload-item-name {
  flex: 1;
  font-size: var(--fs-300);
  color: var(--color-neutral-900);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.file-upload .file-upload-item .file-upload-item-size {
  font-size: var(--fs-200);
  color: var(--color-neutral-500);
  white-space: nowrap;
}
.file-upload .file-upload-item .file-upload-item-remove {
  background: none;
  border: none;
  color: var(--color-neutral-500);
  cursor: pointer;
  padding: 0;
  font-size: var(--fs-400);
  flex-shrink: 0;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.file-upload .file-upload-item .file-upload-item-remove:hover {
  color: var(--color-secondary);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
}
.form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--form-group-gap);
}
.form label {
  font-size: var(--form-label-size);
  font-weight: var(--form-label-weight);
  color: var(--form-label-color);
}
.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form input[type=password],
.form input[type=number],
.form input[type=search],
.form textarea,
.form select {
  width: 100%;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  font-family: var(--font-primary);
  font-size: var(--form-input-font-size);
  color: var(--form-input-color);
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-input-radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form input[type=text]:focus,
.form input[type=email]:focus,
.form input[type=tel]:focus,
.form input[type=password]:focus,
.form input[type=number]:focus,
.form input[type=search]:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--form-focus-border);
  box-shadow: var(--form-focus-shadow);
}
.form input[type=text]::placeholder,
.form input[type=email]::placeholder,
.form input[type=tel]::placeholder,
.form input[type=password]::placeholder,
.form input[type=number]::placeholder,
.form input[type=search]::placeholder,
.form textarea::placeholder,
.form select::placeholder {
  color: var(--form-input-placeholder);
}
.form input[type=text]:disabled,
.form input[type=email]:disabled,
.form input[type=tel]:disabled,
.form input[type=password]:disabled,
.form input[type=number]:disabled,
.form input[type=search]:disabled,
.form textarea:disabled,
.form select:disabled {
  opacity: var(--form-disabled-opacity);
  background: var(--form-disabled-bg);
  cursor: not-allowed;
}
.form textarea {
  resize: vertical;
  min-height: 100px;
}
.form select {
  cursor: pointer;
}
.form .form-hint {
  font-size: var(--form-hint-size);
  color: var(--form-hint-color);
}
.form .form-error {
  font-size: var(--form-error-color);
  color: var(--form-error-color);
}

.gallery.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.gallery.grid .gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}
.gallery.grid .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}
.gallery.grid .gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
}
.gallery.grid .gallery-item .gallery-overlay i {
  color: var(--color-neutral-100);
  font-size: 1.5rem;
}
.gallery.grid .gallery-item:hover img {
  transform: scale(1.08);
}
.gallery.grid .gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery.featured {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gallery.featured .gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  aspect-ratio: 1;
}
.gallery.featured .gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery.featured .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}
.gallery.featured .gallery-item:hover img {
  transform: scale(1.05);
}
@media screen and (max-width: 767.98px) {
  .gallery.featured {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery.featured .gallery-item:first-child {
    grid-column: 1;
    grid-row: 1;
  }
}

.gallery.preview .gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: var(--color-neutral-900);
  margin-bottom: 8px;
}
.gallery.preview .gallery-main .gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
}
.gallery.preview .gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}
.gallery.preview .gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
}
.gallery.preview .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}
.gallery.preview .gallery-item:hover img {
  transform: scale(1.08);
}
.gallery.preview .gallery-item:hover {
  border-color: var(--color-primary-300);
}
.gallery.preview .gallery-item.active {
  border-color: var(--color-primary);
}

.gallery.carousel .gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: var(--color-neutral-900);
  margin-bottom: 10px;
}
.gallery.carousel .gallery-main .gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
}
.gallery.carousel .gallery-thumbs-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gallery.carousel .gallery-thumbs-track {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery.carousel .gallery-thumbs-track::-webkit-scrollbar {
  display: none;
}
.gallery.carousel .gallery-item {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  scroll-snap-align: start;
  transition: border-color 0.2s ease;
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
}
.gallery.carousel .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}
.gallery.carousel .gallery-item:hover img {
  transform: scale(1.08);
}
.gallery.carousel .gallery-item:hover {
  border-color: var(--color-primary-300);
}
.gallery.carousel .gallery-item.active {
  border-color: var(--color-primary);
}
.gallery.carousel .gallery-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-neutral-400);
  background: var(--color-neutral-100);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  color: var(--color-neutral-700);
}
.gallery.carousel .gallery-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-neutral-100);
}
.gallery.carousel .gallery-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.gallery.slideshow {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: var(--color-neutral-900);
  user-select: none;
}
.gallery.slideshow .gallery-slides {
  position: relative;
  width: 100%;
}
.gallery.slideshow .gallery-slide {
  display: none;
  position: relative;
}
.gallery.slideshow .gallery-slide.active {
  display: block;
}
.gallery.slideshow .gallery-slide img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.gallery.slideshow .gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 56px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  color: var(--color-neutral-100);
  font-size: var(--fs-400);
  text-align: center;
}
.gallery.slideshow .gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-raised);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-neutral-100);
  font-size: var(--fs-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
}
.gallery.slideshow .gallery-arrow:hover {
  background: rgba(0, 0, 0, 0.75);
}
.gallery.slideshow .gallery-arrow--prev {
  left: 12px;
}
.gallery.slideshow .gallery-arrow--next {
  right: 12px;
}
.gallery.slideshow .gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: var(--z-raised);
}
.gallery.slideshow .gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.gallery.slideshow .gallery-dot.active, .gallery.slideshow .gallery-dot:hover {
  background: var(--color-neutral-100);
  transform: scale(1.3);
}

.gallery.masonry {
  columns: 3;
  column-gap: 8px;
}
@media screen and (max-width: 767.98px) {
  .gallery.masonry {
    columns: 2;
  }
}
@media screen and (max-width: 575.98px) {
  .gallery.masonry {
    columns: 1;
  }
}
.gallery.masonry .gallery-item {
  break-inside: avoid;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  display: block;
}
.gallery.masonry .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}
.gallery.masonry .gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
}
.gallery.masonry .gallery-item .gallery-overlay i {
  color: var(--color-neutral-100);
  font-size: 1.5rem;
}
.gallery.masonry .gallery-item:hover img {
  transform: scale(1.04);
}
.gallery.masonry .gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery.filmstrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-hover) var(--scrollbar-track-bg);
  padding-bottom: 8px;
}
.gallery.filmstrip::-webkit-scrollbar {
  height: var(--scrollbar-width);
}
.gallery.filmstrip::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
  border-radius: var(--scrollbar-radius);
}
.gallery.filmstrip::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-hover);
  border-radius: var(--scrollbar-radius);
}
.gallery.filmstrip .gallery-item {
  flex-shrink: 0;
  width: 260px;
  height: 180px;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  scroll-snap-align: start;
  position: relative;
}
.gallery.filmstrip .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}
.gallery.filmstrip .gallery-item .gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  color: var(--color-neutral-100);
  font-size: var(--fs-300);
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
}
.gallery.filmstrip .gallery-item:hover img {
  transform: scale(1.05);
}
.gallery.filmstrip .gallery-item:hover .gallery-caption {
  opacity: 1;
}

.gallery.mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  height: 420px;
}
@media screen and (max-width: 767.98px) {
  .gallery.mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }
}
@media screen and (max-width: 575.98px) {
  .gallery.mosaic {
    grid-template-columns: 1fr;
  }
}
.gallery.mosaic .gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}
.gallery.mosaic .gallery-item:first-child {
  grid-row: 1/3;
}
@media screen and (max-width: 767.98px) {
  .gallery.mosaic .gallery-item:first-child {
    grid-row: 1;
    grid-column: 1/3;
    aspect-ratio: 16/9;
  }
}
@media screen and (max-width: 575.98px) {
  .gallery.mosaic .gallery-item:first-child {
    grid-column: 1;
  }
}
.gallery.mosaic .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}
.gallery.mosaic .gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
}
.gallery.mosaic .gallery-item .gallery-overlay i {
  color: var(--color-neutral-100);
  font-size: 1.5rem;
}
.gallery.mosaic .gallery-item.gallery-item--more .gallery-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
  flex-direction: column;
  gap: 4px;
}
.gallery.mosaic .gallery-item.gallery-item--more .gallery-overlay .gallery-more-count {
  font-size: var(--fs-900);
  font-weight: 700;
  color: var(--color-neutral-100);
  line-height: 1;
}
.gallery.mosaic .gallery-item.gallery-item--more .gallery-overlay .gallery-more-label {
  font-size: var(--fs-300);
  color: rgba(255, 255, 255, 0.8);
}
.gallery.mosaic .gallery-item:hover img {
  transform: scale(1.05);
}
.gallery.mosaic .gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.googlemap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-neutral-400);
  padding-top: 56.25%;
}
.googlemap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.googlemap.googlemap--rounded {
  border-radius: var(--border-radius);
}
.googlemap.googlemap--shadow {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.googlemap.googlemap--sm {
  padding-top: 0;
  height: 240px;
}
.googlemap.googlemap--md {
  padding-top: 0;
  height: 360px;
}
.googlemap.googlemap--lg {
  padding-top: 0;
  height: 480px;
}
.googlemap.googlemap--full {
  padding-top: 0;
  height: 100%;
  min-height: 400px;
}

.list.box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.list.box .list-item {
  background: var(--color-neutral-100);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}
.list.box .list-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.list.box .list-item .list-item-image {
  height: 160px;
  overflow: hidden;
  background: var(--color-neutral-400);
}
.list.box .list-item .list-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.list.box .list-item .list-item-body {
  padding: 14px;
  flex: 1;
}
.list.box .list-item .list-item-title {
  font-size: var(--fs-400);
  font-weight: 600;
  margin-bottom: 4px;
}
.list.box .list-item .list-item-desc {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
}
.list.box .list-item .list-item-meta {
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
}
.list.box .list-item .list-item-price {
  font-size: var(--fs-600);
  font-weight: 700;
  margin-top: 6px;
}

.list.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.list.card-list .list-item {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--border-radius);
  padding: 20px 24px;
  transition: border-color 0.3s ease;
  -webkit-transition: border-color 0.3s ease;
  -moz-transition: border-color 0.3s ease;
}
.list.card-list .list-item:hover {
  border-color: var(--color-primary);
}
.list.card-list .list-item .list-item-title {
  font-size: var(--fs-400);
  font-weight: 600;
  margin-bottom: 4px;
}
.list.card-list .list-item .list-item-desc {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  margin: 0;
}
.list.card-list .list-item .list-item-meta {
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
  margin-top: 6px;
}

.list.carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) transparent;
}
.list.carousel::-webkit-scrollbar {
  height: var(--scrollbar-width);
}
.list.carousel::-webkit-scrollbar-track {
  background: transparent;
}
.list.carousel::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--scrollbar-radius);
}
.list.carousel .list-item {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--color-neutral-100);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.list.carousel .list-item .list-item-image {
  height: 150px;
  overflow: hidden;
  background: var(--color-neutral-400);
}
.list.carousel .list-item .list-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.list.carousel .list-item .list-item-body {
  padding: 14px;
}
.list.carousel .list-item .list-item-title {
  font-size: var(--fs-400);
  font-weight: 600;
  margin-bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list.carousel .list-item .list-item-desc {
  font-size: var(--fs-300);
  color: var(--color-neutral-700);
  margin: 0;
}

.list.comments {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.list.comments .list-item {
  display: flex;
  gap: 14px;
}
.list.comments .list-item .list-item-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-neutral-400);
}
.list.comments .list-item .list-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.list.comments .list-item .list-item-avatar.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-neutral-100);
  font-size: var(--fs-400);
  font-weight: 700;
}
.list.comments .list-item .list-item-body {
  flex: 1;
  min-width: 0;
}
.list.comments .list-item .list-item-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.list.comments .list-item .list-item-author {
  font-weight: 600;
  font-size: var(--fs-400);
  color: var(--color-neutral-900);
}
.list.comments .list-item .list-item-date {
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
}
.list.comments .list-item .list-item-text {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  line-height: var(--line-height-relaxed);
  margin: 0;
}
.list.comments .list-item .list-item-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.list.comments .list-item .list-item-actions a {
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
  text-decoration: none;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.list.comments .list-item .list-item-actions a:hover {
  color: var(--color-primary);
}
.list.comments .list-item .list-item-replies {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--color-neutral-400);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.list.comments .list-item .list-item-replies .list-item-avatar {
  width: 36px;
  height: 36px;
}

.list.line {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.list.line .list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-neutral-400);
}
.list.line .list-item:last-child {
  border-bottom: none;
}
.list.line .list-item .list-item-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-400);
}
.list.line .list-item .list-item-image {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-neutral-400);
}
.list.line .list-item .list-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.list.line .list-item .list-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}
.list.line .list-item .list-item-title {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-900);
  line-height: var(--line-height-tight);
}
.list.line .list-item .list-item-desc {
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
  margin: 0;
}
.list.line .list-item .list-item-meta {
  margin-left: auto;
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
  white-space: nowrap;
  padding-top: 2px;
}
.list.line .list-item .list-item-price {
  margin-left: auto;
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--color-neutral-900);
  white-space: nowrap;
  padding-top: 2px;
}
.list.line.line--clean .list-item {
  border-bottom: none;
  padding: 8px 0;
}
.list.line.line--hoverable .list-item {
  border-radius: var(--border-radius-sm);
  padding: 10px 12px;
  margin: 0 -12px;
  cursor: pointer;
  border-bottom: none;
  transition: background 0.15s ease;
  -webkit-transition: background 0.15s ease;
  -moz-transition: background 0.15s ease;
}
.list.line.line--hoverable .list-item:hover {
  background: var(--color-neutral-300);
}
.list.line.line--hoverable .list-item.active {
  background: var(--color-primary-100);
}

.list.link li {
  margin-bottom: 12px;
}
.list.link li:last-child {
  margin-bottom: 0;
}
.list.link li a {
  display: inline-block;
  color: var(--color-neutral-700);
  text-decoration: none;
  font-size: var(--fs-400);
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
}
.list.link li a:hover {
  color: var(--color-primary);
}

.list.rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.list.rows .list-item {
  background: var(--color-neutral-100);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: stretch;
  transition: box-shadow 0.3s ease;
  -webkit-transition: box-shadow 0.3s ease;
  -moz-transition: box-shadow 0.3s ease;
}
.list.rows .list-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.list.rows .list-item .list-item-image {
  width: 130px;
  min-width: 130px;
  overflow: hidden;
  background: var(--color-neutral-400);
  flex-shrink: 0;
}
.list.rows .list-item .list-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.list.rows .list-item .list-item-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.list.rows .list-item .list-item-title {
  font-size: var(--fs-400);
  font-weight: 600;
  margin: 0;
}
.list.rows .list-item .list-item-desc {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  margin: 0;
  flex: 1;
}
.list.rows .list-item .list-item-meta {
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
}
.list.rows .list-item .list-item-price {
  font-size: var(--fs-500);
  font-weight: 700;
  margin-top: 4px;
}

.list.table {
  overflow-x: auto;
}
.list.table table {
  width: 100%;
  border-collapse: collapse;
}
.list.table thead th {
  padding: var(--table-base-cell-padding-y) var(--table-base-cell-padding-x);
  text-align: left;
  font-weight: var(--table-base-header-weight);
  background: var(--table-base-header-bg);
  border-bottom: var(--table-base-header-border);
  color: var(--table-base-header-color);
}
.list.table tbody .list-item {
  border-bottom: 1px solid var(--table-base-row-border);
  transition: background 0.2s ease;
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
}
.list.table tbody .list-item:last-child {
  border-bottom: none;
}
.list.table tbody .list-item:hover {
  background: var(--table-base-hover-bg);
}
.list.table tbody .list-item td {
  padding: var(--table-base-cell-padding-y) var(--table-base-cell-padding-x);
  color: var(--table-base-cell-color);
  vertical-align: middle;
}
.list.table tbody .list-item td.list-item-title {
  font-weight: 600;
  color: var(--color-neutral-900);
}
.list.table tbody .list-item td.list-item-price {
  font-weight: 700;
  color: var(--color-neutral-900);
  white-space: nowrap;
}
.list.table tbody .list-item td.list-item-image {
  width: 70px;
}
.list.table tbody .list-item td.list-item-image img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  display: block;
}

.list.tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.list.tag .list-item {
  background: var(--color-neutral-400);
  color: var(--color-neutral-700);
  padding: 4px 12px;
  border-radius: var(--border-radius-xl);
  font-size: var(--fs-300);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.list.tag .list-item:hover, .list.tag .list-item.active {
  background: var(--color-primary);
  color: var(--color-neutral-100);
}

.list.tile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.list.tile .list-item {
  background: var(--color-neutral-100);
  border-radius: var(--border-radius);
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}
.list.tile .list-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.list.tile .list-item .list-item-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 14px;
}
.list.tile .list-item .list-item-title {
  font-size: var(--fs-400);
  font-weight: 600;
  margin-bottom: 6px;
}
.list.tile .list-item .list-item-desc {
  font-size: var(--fs-300);
  color: var(--color-neutral-700);
  margin: 0;
}

.list.vertical-img-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.list.vertical-img-list .list-item {
  display: flex;
  flex-direction: column;
  background: var(--color-neutral-100);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
  -webkit-transition: box-shadow 0.3s ease;
  -moz-transition: box-shadow 0.3s ease;
}
.list.vertical-img-list .list-item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.list.vertical-img-list .list-item-image {
  position: relative;
  display: block;
  height: 240px;
  overflow: hidden;
  background: var(--color-neutral-400);
}
.list.vertical-img-list .list-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
}
.list.vertical-img-list .list-item-image:hover img {
  transform: scale(1.04);
}
.list.vertical-img-list .list-item-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 12px;
  border-radius: var(--border-radius-xl);
  background: var(--color-primary);
  color: var(--color-neutral-100);
  font-size: var(--fs-200);
  font-weight: 600;
}
.list.vertical-img-list .list-item-body {
  padding: 20px 24px 24px;
  flex: 1;
}
.list.vertical-img-list .list-item-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
}
.list.vertical-img-list .list-item-title {
  font-size: var(--fs-700);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: 10px;
}
.list.vertical-img-list .list-item-title a {
  color: var(--color-neutral-900);
  text-decoration: none;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.list.vertical-img-list .list-item-title a:hover {
  color: var(--color-primary);
}
.list.vertical-img-list .list-item-desc {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  line-height: var(--line-height-relaxed);
  margin-bottom: 16px;
}
.list.vertical-img-list .list-item-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-primary-700);
  text-decoration: none;
  transition: gap 0.2s ease;
  -webkit-transition: gap 0.2s ease;
  -moz-transition: gap 0.2s ease;
}
.list.vertical-img-list .list-item-more:hover {
  gap: 10px;
}

.login-box {
  background: var(--color-neutral-100);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.login-box .login-box-header {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary));
  padding: 32px 32px 28px;
  text-align: center;
}
.login-box .login-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 3px solid rgba(255, 255, 255, 0.4);
}
.login-box .login-title {
  font-size: var(--fs-700);
  font-weight: 700;
  color: var(--color-neutral-100);
  margin-bottom: 4px;
}
.login-box .login-subtitle {
  font-size: var(--fs-400);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.login-box .login-box-body {
  padding: 28px 32px;
}
.login-box .login-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.login-box .login-links a {
  font-size: var(--fs-300);
  color: var(--color-primary-700);
  text-decoration: none;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.login-box .login-links a:hover {
  color: var(--color-primary);
}
.login-box .login-box-footer {
  padding: 16px 32px;
  background: var(--color-neutral-200);
  border-top: 1px solid var(--color-neutral-400);
  text-align: center;
  font-size: var(--fs-300);
  color: var(--color-neutral-700);
}
.login-box .login-box-footer a {
  color: var(--color-primary-700);
  text-decoration: none;
  font-weight: 600;
}
.login-box .login-box-footer a:hover {
  color: var(--color-primary);
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-300);
  padding: 40px 16px;
}

.btn-seznam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 20px;
  background: var(--login-seznam-bg);
  color: var(--color-neutral-100);
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: var(--fs-400);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
}
.btn-seznam:hover {
  background: var(--login-seznam-hover-bg);
  color: var(--color-neutral-100);
}
.btn-seznam img,
.btn-seznam svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
}
.login-divider::before, .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-neutral-400);
}

.menu.horizontal {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.menu.horizontal .menu-item {
  position: relative;
}
.menu.horizontal .menu-item > a {
  display: block;
  padding: 10px 16px;
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.menu.horizontal .menu-item > a:hover {
  color: var(--color-primary);
  background: var(--color-neutral-300);
}
.menu.horizontal .menu-item.active > a {
  color: var(--color-primary);
  font-weight: 600;
}
.menu.horizontal .menu-item:hover > .submenu {
  display: block;
}
.menu.horizontal .menu-item .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--border-radius-sm);
  min-width: 180px;
  z-index: var(--z-dropdown);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.menu.horizontal .menu-item .submenu a {
  display: block;
  padding: 10px 16px;
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.menu.horizontal .menu-item .submenu a:hover {
  background: var(--color-neutral-300);
  color: var(--color-primary);
}

.menu.vertical {
  display: flex;
  flex-direction: column;
}
.menu.vertical .menu-item > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.menu.vertical .menu-item > a i {
  width: 18px;
  color: var(--color-neutral-600);
  font-size: var(--fs-400);
}
.menu.vertical .menu-item > a:hover {
  background: var(--color-neutral-300);
  color: var(--color-primary);
}
.menu.vertical .menu-item > a:hover i {
  color: var(--color-primary);
}
.menu.vertical .menu-item.active > a {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-weight: 600;
}
.menu.vertical .menu-item.active > a i {
  color: var(--color-primary-700);
}
.menu.vertical .menu-divider {
  height: 1px;
  background: var(--color-neutral-400);
  margin: 8px 0;
}

.modal .modal-header {
  background: var(--modal-header-bg);
  color: var(--modal-header-color);
  padding: var(--modal-header-padding);
}
.modal .modal-header .modal-title {
  font-size: var(--modal-title-size);
  font-weight: 600;
}
.modal .modal-header .btn-close {
  filter: brightness(0) invert(1);
}
.modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--modal-body-padding);
}

.features-table {
  font-size: var(--fs-400);
  width: 100%;
  border-collapse: collapse;
}
.features-table th {
  background: var(--table-base-header-bg);
  font-weight: var(--table-base-header-weight);
  padding: var(--table-base-cell-padding-y) 8px;
  vertical-align: middle;
}
.features-table td {
  padding: 10px 8px;
  vertical-align: middle;
}
.features-table tbody tr:hover {
  background: var(--table-base-hover-bg);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nav-gap);
  padding: 0;
  margin: 0;
  list-style: none;
}
.nav .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  color: var(--nav-color);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  padding: var(--nav-padding-y) var(--nav-padding-x);
  line-height: 1.4;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.nav .nav-item:hover {
  color: var(--nav-hover-color);
}
.nav .nav-item.active {
  color: var(--nav-active-color);
}
.nav .nav-item i {
  font-size: var(--fs-400);
}

.nav.pills {
  gap: var(--nav-pills-gap);
}
.nav.pills .nav-item {
  border-radius: var(--border-radius-xl);
  padding: var(--nav-pills-padding-y) var(--nav-pills-padding-x);
  background: var(--nav-pills-item-bg);
  color: var(--nav-pills-item-color);
}
.nav.pills .nav-item:hover, .nav.pills .nav-item.active {
  background: var(--nav-pills-active-bg);
  color: var(--nav-pills-active-color);
}

.nav.tabs {
  border-bottom: 2px solid var(--nav-tabs-border);
  gap: 0;
}
.nav.tabs .nav-item {
  padding: var(--nav-tabs-padding-y) var(--nav-tabs-padding-x);
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--color-neutral-700);
}
.nav.tabs .nav-item:hover {
  color: var(--nav-hover-color);
}
.nav.tabs .nav-item.active {
  color: var(--nav-tabs-active-color);
  border-color: var(--nav-tabs-active-border);
}
.nav.tabs.filled {
  background: var(--nav-tabs-filled-bg);
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
  border-bottom: none;
  gap: 2px;
  padding: 4px 4px 0;
}
.nav.tabs.filled .nav-item {
  border-radius: var(--border-radius-sm) 4px 0 0;
  border-bottom: none;
  margin-bottom: 0;
}
.nav.tabs.filled .nav-item.active {
  background: var(--nav-tabs-filled-active-bg);
  color: var(--nav-tabs-filled-active-color);
}

.pagination-custom {
  display: flex;
  align-items: center;
  gap: var(--pagination-gap);
  flex-wrap: wrap;
}
.pagination-custom .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pagination-size);
  height: var(--pagination-size);
  border-radius: var(--pagination-radius);
  font-size: var(--pagination-font-size);
  color: var(--pagination-color);
  background: var(--pagination-bg);
  border: 1px solid var(--pagination-border);
  text-decoration: none;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.pagination-custom .page-item .page-link:hover {
  background: var(--pagination-hover-bg);
  color: var(--color-neutral-900);
}
.pagination-custom .page-item.active .page-link {
  background: var(--pagination-active-bg);
  border-color: var(--pagination-active-border);
  color: var(--pagination-active-color);
}
.pagination-custom .page-item.disabled .page-link {
  opacity: 0.4;
  cursor: not-allowed;
}

.poll {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--border-radius);
  padding: var(--poll-padding);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.poll .poll-question {
  font-size: var(--fs-600);
  font-weight: 600;
  margin-bottom: var(--poll-question-mb);
  line-height: var(--line-height-tight);
}
.poll .poll-options {
  display: flex;
  flex-direction: column;
  gap: var(--poll-options-gap);
  margin-bottom: var(--size-400);
}
.poll .poll-option {
  cursor: pointer;
}
.poll .poll-option.voted .poll-option-fill {
  background: var(--color-primary);
}
.poll .poll-option.voted .poll-option-label {
  font-weight: 600;
  color: var(--color-neutral-900);
}
.poll .poll-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.poll .poll-option-label {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.poll .poll-option-pct {
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--color-neutral-600);
  min-width: 40px;
  text-align: right;
}
.poll .poll-option-bar {
  height: var(--poll-bar-height);
  background: var(--poll-bar-bg);
  border-radius: var(--poll-bar-radius);
  overflow: hidden;
}
.poll .poll-option-fill {
  height: 100%;
  background: var(--poll-fill-bg);
  border-radius: var(--border-radius-sm);
  width: 0;
  transition: width 0.6s ease;
  -webkit-transition: width 0.6s ease;
  -moz-transition: width 0.6s ease;
}
.poll.poll--vote .poll-option {
  display: block;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--border-radius-sm);
  transition: border-color background 0.2s ease;
  -webkit-transition: border-color background 0.2s ease;
  -moz-transition: border-color background 0.2s ease;
}
.poll.poll--vote .poll-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-100);
}
.poll .poll-meta {
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
  margin-top: var(--size-200);
}
.poll .poll-submit {
  margin-top: 16px;
}

.progress {
  width: 100%;
  height: var(--progress-height);
  background: var(--progress-bg);
  border-radius: var(--progress-radius);
  overflow: hidden;
}
.progress--sm {
  height: var(--progress-height-sm);
}
.progress--lg {
  height: var(--progress-height-lg);
}
.progress--striped .progress-bar {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 0px, rgba(255, 255, 255, 0.15) 10px, transparent 10px, transparent 20px);
}

.progress-bar {
  height: 100%;
  border-radius: var(--progress-radius);
  background: var(--progress-fill);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--size-200);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--color-neutral-100);
  transition: var(--progress-transition);
}
.progress-bar--success {
  background: var(--progress-fill);
}
.progress-bar--danger {
  background: var(--progress-fill-danger);
}
.progress-bar--info {
  background: var(--progress-fill-info);
}
.progress-bar--warning {
  background: var(--progress-fill-warning);
}

@keyframes skeleton-pulse {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.skeleton--rect, .skeleton--circle, .skeleton {
  background: linear-gradient(90deg, var(--color-neutral-400) 25%, var(--color-neutral-300) 50%, var(--color-neutral-400) 75%);
  background-size: 800px 100%;
  animation: skeleton-pulse 1.6s infinite linear;
  border-radius: var(--border-radius-sm);
}

.skeleton {
  height: var(--fs-400);
  width: 100%;
}
.skeleton--sm {
  height: var(--fs-200);
}
.skeleton--lg {
  height: var(--fs-600);
}
.skeleton--circle {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.skeleton--rect {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border-radius: var(--border-radius);
}

.skeleton-card {
  padding: var(--size-400);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  gap: var(--size-300);
}
.skeleton-card .skeleton-card-header {
  display: flex;
  align-items: center;
  gap: var(--size-400);
}
.skeleton-card .skeleton-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--size-200);
}

.range-slider {
  width: 100%;
}
.range-slider .range-slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
}
.range-slider .range-slider-value {
  font-weight: 700;
  color: var(--color-primary-700);
}
.range-slider .range-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-neutral-400);
  border-radius: var(--border-radius-pill);
  outline: none;
  cursor: pointer;
}
.range-slider .range-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-neutral-100);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-transition: transform 0.15s ease;
  -moz-transition: transform 0.15s ease;
}
.range-slider .range-slider-input::-webkit-slider-thumb:hover, .range-slider .range-slider-input::-webkit-slider-thumb:active {
  transform: scale(1.2);
}
.range-slider .range-slider-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-neutral-100);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.range-slider .range-slider-input {
  background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) var(--value, 40%), var(--color-neutral-400) var(--value, 40%), var(--color-neutral-400) 100%);
}
.range-slider .range-slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.range-slider .range-slider-ticks span {
  font-size: var(--fs-200);
  color: var(--color-neutral-500);
}

.rating {
  display: flex;
  align-items: center;
  gap: var(--rating-gap);
}
.rating .rating-star {
  font-size: var(--rating-font-size);
  color: var(--rating-color-empty);
}
.rating .rating-star.filled {
  color: var(--rating-color-filled);
}
.rating .rating-star.half {
  color: var(--rating-color-filled);
  opacity: 0.5;
}
.rating .rating-score {
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--color-neutral-900);
  margin-left: var(--rating-score-ml);
}
.rating .rating-count {
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
}

.sortbox {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-neutral-400);
  margin-bottom: 20px;
}
.sortbox .sortbox-label {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-700);
  white-space: nowrap;
}
.sortbox .sortbox-options {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}
.sortbox .sortbox-option {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.sortbox .sortbox-option:hover {
  background: var(--color-neutral-400);
  color: var(--color-neutral-900);
}
.sortbox .sortbox-option.active {
  background: var(--color-primary);
  color: var(--color-neutral-100);
  border-color: var(--color-primary);
}
.sortbox .sortbox-right {
  margin-left: auto;
}
.sortbox .sortbox-select {
  padding: 6px 32px 6px 12px;
  font-family: var(--font-primary);
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-input-radius);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.2s ease;
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
}
.sortbox .sortbox-select:focus {
  border-color: var(--color-primary);
}
.sortbox.sortbox--compact {
  padding: 8px 0;
  margin-bottom: 12px;
}
.sortbox.sortbox--compact .sortbox-option {
  padding: 4px 10px;
  font-size: var(--fs-300);
}

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: var(--stat-card-gap);
  padding: var(--stat-card-padding);
  background: var(--stat-card-bg);
  border: 1px solid var(--stat-card-border);
  border-radius: var(--stat-card-radius);
  box-shadow: var(--stat-card-shadow);
  transition: box-shadow var(--transition);
}
.stat-card:hover {
  box-shadow: var(--shadow-md);
}
.stat-card .stat-card-icon {
  width: var(--stat-card-icon-size);
  height: var(--stat-card-icon-size);
  border-radius: var(--border-radius);
  background: var(--stat-card-icon-bg);
  color: var(--stat-card-icon-color);
  font-size: var(--fs-500);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-card .stat-card-body {
  flex: 1;
  min-width: 0;
}
.stat-card .stat-card-value {
  font-size: var(--stat-card-value-size);
  font-weight: 700;
  color: var(--color-neutral-900);
  line-height: 1.1;
  margin-bottom: var(--size-200);
}
.stat-card .stat-card-label {
  font-size: var(--stat-card-label-size);
  color: var(--color-neutral-600);
}
.stat-card .stat-card-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--stat-card-trend-size);
  font-weight: 600;
  margin-top: var(--size-200);
}
.stat-card .stat-card-trend--up {
  color: var(--stat-card-trend-up);
}
.stat-card .stat-card-trend--down {
  color: var(--stat-card-trend-down);
}
.stat-card .stat-card-trend--flat {
  color: var(--stat-card-trend-flat);
}
.stat-card--danger .stat-card-icon {
  background: var(--color-secondary-100);
  color: var(--color-secondary-600);
}
.stat-card--info .stat-card-icon {
  background: var(--color-third-100);
  color: var(--color-third-600);
}
.stat-card--grey .stat-card-icon {
  background: var(--color-neutral-300);
  color: var(--color-neutral-700);
}

.stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
.stepper::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--color-neutral-400);
  z-index: var(--z-base);
}
.stepper .stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  z-index: var(--z-raised);
}
.stepper .stepper-step.completed::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--color-primary);
  z-index: -1;
}
.stepper .stepper-indicator {
  width: var(--stepper-indicator-size);
  height: var(--stepper-indicator-size);
  border-radius: 50%;
  border: 2px solid var(--stepper-indicator-border);
  background: var(--stepper-indicator-bg);
  color: var(--stepper-indicator-color);
  font-size: var(--fs-400);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}
.stepper .stepper-label {
  font-size: var(--stepper-label-font-size);
  color: var(--stepper-label-color);
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}
.stepper .stepper-step.active .stepper-indicator {
  background: var(--stepper-active-bg);
  border-color: var(--stepper-active-border);
  color: var(--stepper-active-color);
}
.stepper .stepper-step.active .stepper-label {
  color: var(--stepper-active-label-color);
}
.stepper .stepper-step.completed .stepper-indicator {
  background: var(--stepper-done-bg);
  border-color: var(--stepper-done-bg);
  color: var(--stepper-active-color);
}
.stepper .stepper-step.completed .stepper-label {
  color: var(--color-neutral-700);
}
.stepper.vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.stepper.vertical::before {
  top: 10%;
  bottom: 10%;
  left: 17px;
  right: auto;
  width: 2px;
  height: auto;
}
.stepper.vertical .stepper-step {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--stepper-vert-gap);
  flex: none;
  padding-bottom: var(--stepper-vert-step-pb);
}
.stepper.vertical .stepper-step:last-child {
  padding-bottom: 0;
}
.stepper.vertical .stepper-step.completed::after {
  top: 36px;
  bottom: 0;
  left: 17px;
  right: auto;
  width: 2px;
  height: auto;
}
.stepper.vertical .stepper-label {
  text-align: left;
  padding-top: 6px;
}
.stepper.vertical .stepper-body {
  padding-top: 4px;
}

.stepper-desc {
  font-size: var(--fs-200);
  color: var(--color-neutral-500);
  margin-top: 2px;
}

.table-custom {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
  background: var(--table-bg);
  border-radius: var(--table-radius);
  overflow: hidden;
  box-shadow: var(--table-shadow);
}
.table-custom thead th {
  padding: var(--table-padding-y) var(--table-padding-x);
  text-align: left;
  font-weight: var(--table-base-header-weight);
  background: var(--table-header-bg);
  border-bottom: var(--table-base-header-border);
  color: var(--table-header-color);
}
.table-custom tbody tr {
  border-bottom: 1px solid var(--table-border);
  transition: background var(--transition);
}
.table-custom tbody tr:last-child {
  border-bottom: none;
}
.table-custom tbody tr:hover {
  background: var(--table-hover-bg);
}
.table-custom tbody td {
  padding: var(--table-padding-y) var(--table-padding-x);
  color: var(--table-cell-color);
  vertical-align: middle;
}
.table-custom.striped tbody tr:nth-child(even) {
  background: var(--table-stripe-bg);
}

.timeline {
  position: relative;
  padding-left: var(--timeline-pl);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: var(--timeline-line-width);
  background: var(--timeline-line-color);
  border-radius: 1px;
}
.timeline .timeline-item {
  position: relative;
  margin-bottom: var(--timeline-item-mb);
}
.timeline .timeline-item:last-child {
  margin-bottom: 0;
}
.timeline .timeline-item .timeline-marker {
  position: absolute;
  left: -24px;
  top: 4px;
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  border-radius: 50%;
  background: var(--timeline-dot-bg-inactive);
  border: 3px solid var(--timeline-dot-border);
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-neutral-500);
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.timeline .timeline-item.timeline-item--featured .timeline-marker {
  background: var(--timeline-dot-bg);
  outline-color: var(--timeline-dot-bg);
  width: 18px;
  height: 18px;
  left: -26px;
}
.timeline .timeline-date {
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--timeline-meta-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.timeline .timeline-title {
  font-size: var(--fs-600);
  font-weight: 600;
  margin-bottom: var(--size-200);
  color: var(--color-neutral-900);
  line-height: var(--line-height-tight);
}
.timeline .timeline-text {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  margin: 0;
  line-height: var(--line-height-relaxed);
}
.timeline.timeline--horizontal {
  display: flex;
  gap: 0;
  padding-left: 0;
  overflow-x: auto;
}
.timeline.timeline--horizontal::before {
  top: 20px;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 2px;
}
.timeline.timeline--horizontal .timeline-item {
  flex: 0 0 200px;
  padding-top: 40px;
  margin-bottom: 0;
  text-align: center;
}
.timeline.timeline--horizontal .timeline-item .timeline-marker {
  left: 50%;
  top: 13px;
  transform: translateX(-50%);
}

.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--size-300);
  padding: var(--size-400);
}
.toast-container--top-right {
  top: 0;
  right: 0;
  align-items: flex-end;
}
.toast-container--top-left {
  top: 0;
  left: 0;
  align-items: flex-start;
}
.toast-container--bottom-right {
  bottom: 0;
  right: 0;
  align-items: flex-end;
}
.toast-container--bottom-left {
  bottom: 0;
  left: 0;
  align-items: flex-start;
}
.toast-container--top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.toast-container--bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--size-300);
  padding: var(--toast-padding-y) var(--toast-padding-x);
  border-radius: var(--toast-radius);
  border-left: var(--toast-border-width) solid transparent;
  background: var(--toast-bg);
  color: var(--toast-color);
  min-width: var(--toast-min-width);
  max-width: var(--toast-max-width);
  box-shadow: var(--toast-shadow);
  font-size: var(--toast-font-size);
  transition: all var(--transition-slow);
}
.toast.hiding {
  opacity: 0;
  transform: translateX(20px);
}
.toast .toast-icon {
  font-size: var(--fs-500);
  flex-shrink: 0;
}
.toast .toast-message {
  flex: 1;
}
.toast .toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-neutral-600);
  font-size: var(--fs-400);
  padding: 0;
  flex-shrink: 0;
  transition: color var(--transition);
}
.toast .toast-close:hover {
  color: var(--color-neutral-900);
}
.toast--success {
  border-color: var(--toast-success-border);
}
.toast--success .toast-icon {
  color: var(--toast-success-icon);
}
.toast--danger {
  border-color: var(--toast-danger-border);
}
.toast--danger .toast-icon {
  color: var(--toast-danger-icon);
}
.toast--info {
  border-color: var(--toast-info-border);
}
.toast--info .toast-icon {
  color: var(--toast-info-icon);
}
.toast--warning {
  border-color: var(--toast-warning-border);
}
.toast--warning .toast-icon {
  color: var(--toast-warning-icon);
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: var(--size-300);
  cursor: pointer;
}

.toggle {
  position: relative;
  display: inline-block;
  width: var(--toggle-width);
  height: var(--toggle-height);
  border-radius: var(--toggle-radius);
  background: var(--toggle-bg);
  transition: background var(--toggle-transition);
  flex-shrink: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--toggle-height) - 4px);
  height: calc(var(--toggle-height) - 4px);
  border-radius: 50%;
  background: var(--toggle-knob-bg);
  box-shadow: var(--toggle-knob-shadow);
  transition: transform var(--toggle-transition);
}
.toggle.active, input:checked + .toggle {
  background: var(--toggle-active-bg);
}
.toggle.active::after, input:checked + .toggle::after {
  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
}

.toggle-label {
  font-size: var(--fs-400);
  color: var(--color-neutral-800);
  user-select: none;
}

.navbar {
  background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-neutral-400);
  padding: 15px 0;
}
.navbar .navbar-brand {
  font-size: var(--fs-700);
  font-weight: 700;
  color: var(--color-primary) !important;
}
.navbar .navbar-brand span {
  color: var(--color-neutral-900);
}
.navbar .nav-link {
  color: var(--color-neutral-700) !important;
  font-size: var(--fs-400);
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
  color: var(--color-primary) !important;
}

footer {
  position: relative;
  z-index: 0;
  background: var(--color-neutral-900);
  color: var(--color-neutral-600);
  padding: var(--section-padding-y-sm) 0 30px;
}
footer a {
  color: var(--color-neutral-600);
  text-decoration: none;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
}
footer a:hover {
  color: var(--color-primary);
}
footer .footer-section h4 {
  color: var(--color-neutral-100);
  font-size: var(--fs-500);
  margin-bottom: 20px;
  font-weight: 600;
}
footer .footer-menu li {
  margin-bottom: 12px;
}
footer .footer-menu li a {
  display: inline-block;
}
footer .footer-contact-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
footer .footer-contact-list li .icon {
  color: var(--color-primary);
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
footer .footer-contact-list li .icon i {
  font-size: var(--fs-400);
}
footer .footer-bottom {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--color-neutral-800);
  text-align: center;
  font-size: var(--fs-400);
}

main {
  min-height: 60vh;
}

.section {
  padding: var(--section-padding-y) 0;
}

.section--white {
  background: var(--color-neutral-100);
}

.section--light {
  background: var(--color-neutral-300);
}

.section--lighter {
  background: var(--color-neutral-200);
}

.section--green {
  background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary) 100%);
  color: var(--color-neutral-100);
}
.section--green .section-title {
  color: var(--color-neutral-100);
}
.section--green .section-title::after {
  background: var(--color-neutral-100);
}

.aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aside-widget {
  background: var(--color-neutral-100);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.aside-widget .aside-widget-title {
  padding: 14px 18px;
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--color-neutral-900);
  background: var(--color-neutral-200);
  border-bottom: 1px solid var(--color-neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.aside-widget .aside-widget-body {
  padding: 16px 18px;
}

.aside--left .filter-widget .filter-group {
  margin-bottom: 16px;
}
.aside--left .filter-widget .filter-group:last-child {
  margin-bottom: 0;
}
.aside--left .filter-widget .filter-group-title {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-900);
  margin-bottom: 8px;
}
.aside--left .filter-widget .filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.aside--left .filter-widget .filter-option:hover {
  color: var(--color-primary);
}
.aside--left .filter-widget .filter-option input[type=checkbox],
.aside--left .filter-widget .filter-option input[type=radio] {
  accent-color: var(--color-primary);
  cursor: pointer;
}
.aside--left .filter-widget .filter-option .filter-count {
  margin-left: auto;
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
}
.aside--left .price-range .price-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
}
.aside--left .price-range .price-inputs input[type=number] {
  width: 80px;
  padding: 6px 10px;
  font-family: var(--font-primary);
  font-size: var(--fs-400);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--border-radius-sm);
  outline: none;
  text-align: right;
}
.aside--left .price-range .price-inputs input[type=number]:focus {
  border-color: var(--color-primary);
}
.aside--left .category-tree li {
  list-style: none;
}
.aside--left .category-tree a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.aside--left .category-tree a:hover, .aside--left .category-tree a.active {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}
.aside--left .category-tree ul {
  padding-left: 16px;
  margin-top: 2px;
}

.aside--right .contact-widget {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary));
  border-radius: var(--border-radius);
  padding: 24px;
  text-align: center;
  color: var(--color-neutral-100);
}
.aside--right .contact-widget .contact-widget-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}
.aside--right .contact-widget .contact-widget-title {
  font-size: var(--fs-600);
  font-weight: 700;
  margin-bottom: 8px;
}
.aside--right .contact-widget .contact-widget-text {
  font-size: var(--fs-400);
  opacity: 0.85;
  margin-bottom: 20px;
  line-height: var(--line-height-relaxed);
}
.aside--right .popular-widget .popular-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-neutral-400);
}
.aside--right .popular-widget .popular-item:last-child {
  border-bottom: none;
}
.aside--right .popular-widget .popular-item .popular-num {
  font-size: var(--fs-900);
  font-weight: 700;
  color: var(--color-neutral-400);
  line-height: 1;
  min-width: 28px;
}
.aside--right .popular-widget .popular-item a {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-900);
  text-decoration: none;
  line-height: var(--line-height-tight);
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.aside--right .popular-widget .popular-item a:hover {
  color: var(--color-primary);
}
.aside--right .banner-widget img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-sm);
  display: block;
}

.newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.newsletter-form input[type=email] {
  flex: 1;
  min-width: 200px;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  font-family: var(--font-primary);
  font-size: var(--fs-400);
  color: var(--color-neutral-900);
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-input-radius);
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
}
.newsletter-form input[type=email]:focus {
  border-color: var(--color-primary);
}
.newsletter-form input[type=email]::placeholder {
  color: var(--form-input-placeholder);
}
.newsletter-form button {
  padding: 10px 20px;
  background: var(--color-primary);
  color: var(--color-neutral-100);
  border: none;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-primary);
  font-size: var(--fs-400);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
}
.newsletter-form button:hover {
  background: var(--color-primary-700);
}

.demo-sidebar {
  background: var(--color-neutral-100);
  border-right: 1px solid var(--color-neutral-400);
  min-height: 100vh;
  padding: 24px 16px;
}

.demo-page-subtitle {
  color: var(--color-neutral-600);
  font-size: var(--fs-400);
}

.demo-nav {
  position: sticky;
  top: 20px;
}
.demo-nav a {
  display: block;
  padding: 6px 12px;
  border-radius: 4px;
  color: var(--color-neutral-700);
  text-decoration: none;
  font-size: var(--fs-400);
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}
.demo-nav a:hover {
  background: var(--color-neutral-400);
  color: var(--color-primary);
}
.demo-nav a.active {
  background: var(--color-primary);
  color: var(--color-neutral-100);
}

.demo-nav-title {
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--color-neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 12px 4px;
  margin-top: 8px;
}

.demo-hero {
  padding: 40px 32px;
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary));
  color: var(--color-neutral-100);
}
.demo-hero .demo-hero-path {
  font-family: "Courier New", monospace;
  background: rgba(0, 0, 0, 0.2);
  padding: 3px 10px;
  border-radius: var(--border-radius-sm);
  font-size: var(--fs-300);
}
.demo-hero .demo-hero-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--color-neutral-100);
}
.demo-hero .demo-hero-desc {
  opacity: 0.9;
  font-size: var(--fs-400);
  margin: 0;
}
.demo-hero .demo-hero-code {
  background: rgba(0, 0, 0, 0.2);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: var(--fs-300);
}

.demo-content {
  padding: 0 32px;
}

.demo-section {
  padding: var(--section-padding-y-sm) 0;
  border-bottom: 2px solid var(--color-neutral-400);
}
.demo-section:last-child {
  border-bottom: none;
}
.demo-section:nth-child(even) {
  background: var(--color-neutral-100);
}

.demo-label {
  display: inline-block;
  background: var(--color-neutral-900);
  color: var(--color-primary);
  font-family: "Courier New", monospace;
  font-size: var(--fs-200);
  padding: 3px 10px;
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
}

.demo-title {
  font-size: var(--fs-700);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-neutral-900);
}

.demo-desc {
  color: var(--color-neutral-700);
  font-size: var(--fs-400);
  margin-bottom: 32px;
}

.demo-box {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--border-radius);
  padding: 24px;
  margin-bottom: 20px;
}
.demo-box.demo-box--green {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary));
  border: none;
}
.demo-box.demo-box--flush {
  padding-top: 0;
  padding-bottom: 0;
}
.demo-box.demo-box--narrow {
  max-width: 320px;
}
.demo-box.demo-box--form {
  max-width: 540px;
}
.demo-box .demo-box-label {
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--color-neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.demo-box .demo-box-label.demo-box-label--light {
  color: rgba(255, 255, 255, 0.7);
}

.blog-layout {
  display: grid;
  gap: 32px;
}
@media screen and (min-width: 992px) {
  .blog-layout {
    grid-template-columns: 1fr 300px;
  }
}

.blog-main {
  min-width: 0;
}

.blog-aside {
  min-width: 0;
}

.article .article-header {
  margin-bottom: 32px;
}
.article .article-category {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--color-primary);
  color: var(--color-neutral-100);
  font-size: var(--fs-200);
  font-weight: 600;
  margin-bottom: 14px;
  text-decoration: none;
}
.article .article-title {
  font-size: var(--fs-900);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: 16px;
  color: var(--color-neutral-900);
}
@media screen and (max-width: 767.98px) {
  .article .article-title {
    font-size: var(--fs-800);
  }
}
.article .article-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-300);
  color: var(--color-neutral-600);
}
.article .article-meta .article-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.article .article-meta .article-author img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.article .article-meta .article-date i,
.article .article-meta .article-views i,
.article .article-meta .article-comments i {
  margin-right: 4px;
}
.article .article-hero {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 32px;
}
.article .article-hero img {
  width: 100%;
  height: auto;
  display: block;
}
.article .article-body {
  font-size: var(--fs-400);
  color: var(--color-neutral-800);
  line-height: var(--line-height-loose);
}
.article .article-body h2, .article .article-body h3, .article .article-body h4 {
  color: var(--color-neutral-900);
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: var(--line-height-tight);
}
.article .article-body h2 {
  font-size: var(--fs-700);
}
.article .article-body h3 {
  font-size: var(--fs-600);
}
.article .article-body h4 {
  font-size: var(--fs-600);
}
.article .article-body p {
  margin-bottom: 1.2em;
}
.article .article-body a {
  color: var(--color-primary-700);
  text-decoration: underline;
}
.article .article-body ul, .article .article-body ol {
  padding-left: 24px;
  margin-bottom: 1.2em;
}
.article .article-body li {
  margin-bottom: 6px;
}
.article .article-body blockquote {
  border-left: 4px solid var(--color-primary);
  padding: 16px 20px;
  margin: 24px 0;
  background: var(--color-primary-100);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--color-neutral-800);
}
.article .article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 16px 0;
}
.article .article-body code {
  font-family: "Courier New", monospace;
  font-size: var(--fs-300);
  background: var(--color-neutral-400);
  padding: 2px 6px;
  border-radius: 3px;
}
.article .article-body pre {
  background: var(--color-neutral-900);
  color: #dce775;
  padding: 20px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 24px 0;
}
.article .article-body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}
.article .article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: var(--fs-400);
}
.article .article-body table th, .article .article-body table td {
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  border: 1px solid var(--color-neutral-400);
}
.article .article-body table th {
  background: var(--color-neutral-300);
  font-weight: 600;
}
.article .article-tags {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-neutral-400);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.article .article-tags .tags-label {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-700);
}

.article-discussion {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--color-neutral-400);
}
.article-discussion .discussion-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
}
.article-discussion .discussion-title {
  font-size: var(--fs-700);
  font-weight: 700;
  color: var(--color-neutral-900);
}
.article-discussion .discussion-count {
  font-size: var(--fs-400);
  color: var(--color-neutral-600);
}
.article-discussion .discussion-form {
  background: var(--color-neutral-200);
  border-radius: var(--border-radius);
  padding: 24px;
  margin-top: 32px;
}
.article-discussion .discussion-form .discussion-form-title {
  font-size: var(--fs-600);
  font-weight: 600;
  margin-bottom: 20px;
}
.article-discussion .discussion-login-prompt {
  text-align: center;
  padding: 28px;
  background: var(--color-neutral-200);
  border-radius: var(--border-radius);
  margin-top: 24px;
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
}
.article-discussion .discussion-login-prompt a {
  color: var(--color-primary-700);
  text-decoration: none;
  font-weight: 600;
}
.article-discussion .discussion-login-prompt a:hover {
  color: var(--color-primary);
}

.article-list.style-1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.article-list.style-1 .al-item {
  display: flex;
  gap: 20px;
  background: var(--color-neutral-100);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
  -webkit-transition: box-shadow 0.3s ease;
  -moz-transition: box-shadow 0.3s ease;
}
.article-list.style-1 .al-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 575.98px) {
  .article-list.style-1 .al-item {
    flex-direction: column;
  }
}
.article-list.style-1 .al-item-image {
  display: block;
  width: 220px;
  flex-shrink: 0;
  overflow: hidden;
}
.article-list.style-1 .al-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}
.article-list.style-1 .al-item-image:hover img {
  transform: scale(1.04);
}
@media screen and (max-width: 575.98px) {
  .article-list.style-1 .al-item-image {
    width: 100%;
    height: 180px;
  }
}
.article-list.style-1 .al-item-body {
  padding: 16px 20px 16px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 575.98px) {
  .article-list.style-1 .al-item-body {
    padding: 16px;
  }
}
.article-list.style-1 .al-item-category {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--border-radius-xl);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: var(--fs-200);
  font-weight: 600;
  margin-bottom: 8px;
  text-decoration: none;
  align-self: flex-start;
}
.article-list.style-1 .al-item-title {
  font-size: var(--fs-600);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: 8px;
}
.article-list.style-1 .al-item-title a {
  color: var(--color-neutral-900);
  text-decoration: none;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.article-list.style-1 .al-item-title a:hover {
  color: var(--color-primary);
}
.article-list.style-1 .al-item-perex {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  line-height: var(--line-height-relaxed);
  flex: 1;
  margin-bottom: 12px;
}
.article-list.style-1 .al-item-meta {
  display: flex;
  gap: 12px;
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
  flex-wrap: wrap;
  margin-top: auto;
}

.article-list.style-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.article-list.style-2 .al-item {
  background: var(--color-neutral-100);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}
.article-list.style-2 .al-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.article-list.style-2 .al-item-image {
  display: block;
  height: 200px;
  overflow: hidden;
}
.article-list.style-2 .al-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
}
.article-list.style-2 .al-item-image:hover img {
  transform: scale(1.05);
}
.article-list.style-2 .al-item-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.article-list.style-2 .al-item-category {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--border-radius-xl);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: var(--fs-200);
  font-weight: 600;
  margin-bottom: 10px;
  text-decoration: none;
  align-self: flex-start;
}
.article-list.style-2 .al-item-title {
  font-size: var(--fs-600);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: 10px;
}
.article-list.style-2 .al-item-title a {
  color: var(--color-neutral-900);
  text-decoration: none;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.article-list.style-2 .al-item-title a:hover {
  color: var(--color-primary);
}
.article-list.style-2 .al-item-perex {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  line-height: var(--line-height-relaxed);
  flex: 1;
  margin-bottom: 16px;
}
.article-list.style-2 .al-item-meta {
  display: flex;
  gap: 10px;
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-neutral-400);
}

.article-list.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.article-list.cards .al-item {
  background: var(--color-neutral-100);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
  -webkit-transition: box-shadow 0.3s ease;
  -moz-transition: box-shadow 0.3s ease;
}
.article-list.cards .al-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.article-list.cards .al-item-image {
  display: block;
  height: 140px;
  overflow: hidden;
}
.article-list.cards .al-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}
.article-list.cards .al-item-image:hover img {
  transform: scale(1.05);
}
.article-list.cards .al-item-body {
  padding: 12px 14px 14px;
}
.article-list.cards .al-item-title {
  font-size: var(--fs-400);
  font-weight: 600;
  line-height: var(--line-height-tight);
  margin-bottom: 6px;
}
.article-list.cards .al-item-title a {
  color: var(--color-neutral-900);
  text-decoration: none;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.article-list.cards .al-item-title a:hover {
  color: var(--color-primary);
}
.article-list.cards .al-item-meta {
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
}

.article-list.vertical-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-list.vertical-cards .al-item--featured {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 360px;
}
.article-list.vertical-cards .al-item--featured .al-item-image {
  position: absolute;
  inset: 0;
}
.article-list.vertical-cards .al-item--featured .al-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
}
.article-list.vertical-cards .al-item--featured:hover .al-item-image img {
  transform: scale(1.03);
}
.article-list.vertical-cards .al-item--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
}
.article-list.vertical-cards .al-item--featured .al-item-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  z-index: var(--z-raised);
}
.article-list.vertical-cards .al-item--featured .al-item-category {
  background: var(--color-primary-overlay);
  color: var(--color-neutral-100);
  margin-bottom: 8px;
}
.article-list.vertical-cards .al-item--featured .al-item-title a {
  color: var(--color-neutral-100);
  font-size: var(--fs-700);
}
.article-list.vertical-cards .al-item--featured .al-item-title a:hover {
  color: var(--color-primary-300);
}
.article-list.vertical-cards .al-item--featured .al-item-meta {
  color: rgba(255, 255, 255, 0.75);
}
.article-list.vertical-cards .al-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media screen and (max-width: 575.98px) {
  .article-list.vertical-cards .al-secondary-grid {
    grid-template-columns: 1fr;
  }
}
.article-list.vertical-cards .al-item--small {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--color-neutral-100);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
.article-list.vertical-cards .al-item--small .al-item-image {
  width: 90px;
  height: 70px;
  flex-shrink: 0;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}
.article-list.vertical-cards .al-item--small .al-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-list.vertical-cards .al-item--small .al-item-title {
  font-size: var(--fs-400);
}
.article-list.vertical-cards .al-item--small .al-item-title a {
  color: var(--color-neutral-900);
  text-decoration: none;
  font-weight: 600;
  line-height: var(--line-height-tight);
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
}
.article-list.vertical-cards .al-item--small .al-item-title a:hover {
  color: var(--color-primary);
}
.article-list.vertical-cards .al-item--small .al-item-meta {
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
  margin-top: 4px;
}
.article-list.vertical-cards .al-item-category {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--border-radius-xl);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: var(--fs-200);
  font-weight: 600;
  margin-bottom: 8px;
  text-decoration: none;
}
.article-list.vertical-cards .al-item-title {
  font-weight: 700;
  line-height: var(--line-height-tight);
}
.article-list.vertical-cards .al-item-meta {
  font-size: var(--fs-200);
  color: var(--color-neutral-600);
  margin-top: 6px;
}

.flash-messages {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  width: 100%;
  pointer-events: none;
}
@media screen and (max-width: 575.98px) {
  .flash-messages {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

.flash-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  pointer-events: all;
  animation: flash-in 0.3s ease;
}
@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.flash-message .flash-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.flash-message .flash-text {
  flex: 1;
  font-size: var(--fs-400);
}
.flash-message .flash-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
}
.flash-message .flash-close:hover {
  opacity: 1;
}
.flash-message.flash-success {
  background: var(--color-primary-100);
  border-color: var(--color-primary);
  color: var(--color-primary-900);
}
.flash-message.flash-info {
  background: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-color);
}
.flash-message.flash-warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-color);
}
.flash-message.flash-error {
  background: var(--color-secondary-100);
  border-color: var(--color-secondary);
  color: var(--color-secondary-900);
}

.btn-contact {
  background: var(--color-secondary);
  color: var(--color-neutral-100);
  padding: 8px 20px;
  border-radius: var(--border-radius-sm);
  font-size: var(--fs-300);
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
}
.btn-contact:hover {
  background: var(--color-secondary-700);
  color: var(--color-neutral-100);
}

.hero {
  background: var(--color-neutral-100);
  padding-block: 120px;
}
.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}
.hero .highlight {
  color: var(--color-primary);
}
.hero p.lead {
  font-size: var(--fs-500);
  color: var(--color-neutral-700);
  margin-bottom: 30px;
  line-height: var(--line-height-relaxed);
}
.hero img {
  transform: scale(1.2);
}

.btn-primary-custom {
  background: var(--color-secondary);
  color: var(--color-neutral-100);
  padding: 15px 40px;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
}
.btn-primary-custom:hover {
  background: var(--color-secondary-700);
  color: var(--color-neutral-100);
}

.code-window {
  background: #1e1e1e;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.code-header {
  background: #2d2d30;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.code-dot.red {
  background: #ff5f56;
}
.code-dot.yellow {
  background: #ffbd2e;
}
.code-dot.green {
  background: #27c93f;
}

.code-title {
  color: #ccc;
  font-size: var(--fs-200);
  margin-left: 10px;
}

.code-content {
  padding: 25px;
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  line-height: var(--line-height-relaxed);
  color: #d4d4d4;
  min-height: 300px;
}

.code-line {
  display: block;
}

.code-keyword {
  color: #569cd6;
}

.code-tag {
  color: #4ec9b0;
}

.code-attr {
  color: #9cdcfe;
}

.code-string {
  color: #ce9178;
}

.code-variable {
  color: #dcdcaa;
}

.code-comment {
  color: #6a9955;
}

.code-bracket {
  color: var(--code-bracket-color);
}

.section-title {
  text-align: center;
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  margin-bottom: var(--section-title-mb);
  color: var(--section-title-color);
}
.section-title::after {
  content: "";
  display: block;
  width: var(--section-title-line-size);
  height: var(--section-title-line-h);
  background: var(--section-title-line-color);
  margin: 20px auto 0;
}

.section-subtitle {
  text-align: center;
  color: var(--section-subtitle-color);
  font-size: var(--section-subtitle-size);
  margin-bottom: var(--section-subtitle-mb);
}

.services {
  padding: var(--section-padding-y) 0;
  background: var(--color-neutral-200);
}
.services .list.tile {
  grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 576px) {
  .services .list.tile {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 992px) {
  .services .list.tile {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-card {
  background: var(--color-neutral-100);
  padding: var(--card-padding-service);
  text-align: center;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  height: 100%;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
}
.service-card h3 {
  font-size: var(--fs-500);
  margin-bottom: 15px;
}
.service-card p {
  color: var(--color-neutral-700);
  font-size: var(--fs-300);
}

.service-icon {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  margin: 0 auto 20px;
  background: var(--card-icon-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.products {
  padding: var(--section-padding-y) 0;
  background: var(--color-neutral-100);
}

.product-card {
  background: var(--color-neutral-200);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s ease;
  -webkit-transition: box-shadow 0.3s ease;
  -moz-transition: box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.product-content {
  padding: 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-content h3 {
  font-size: var(--fs-600);
  margin-bottom: 15px;
}
.product-content p {
  color: var(--color-neutral-700);
  margin-bottom: 20px;
  flex: 1;
}

.product-badge {
  display: inline-block;
  background: var(--card-badge-bg);
  color: var(--card-badge-color);
  padding: 5px 15px;
  border-radius: var(--card-badge-radius);
  font-size: var(--fs-200);
  font-weight: 600;
  margin-bottom: 15px;
  align-self: flex-start;
}

.product-price {
  font-size: var(--fs-600);
  font-weight: 700;
  margin-bottom: 20px;
}

.btn-demo {
  background: var(--color-primary);
  color: var(--color-neutral-100);
  padding: 12px;
  text-align: center;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
}
.btn-demo:hover {
  transform: translateY(-5px);
  background: var(--color-primary-700);
  color: var(--color-neutral-100);
}

.btn-features {
  background: var(--color-neutral-100);
  color: var(--color-neutral-900);
  padding: 12px;
  text-align: center;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
}
.btn-features:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pricing {
  padding: var(--section-padding-y) 0;
  background: var(--color-neutral-200);
}

.pricing-card {
  background: var(--color-neutral-100);
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}
.pricing-card:hover {
  transform: translateY(0);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.pricing-card.featured {
  background: var(--color-primary);
  background-image: radial-gradient(circle, var(--color-primary) 70%, var(--color-primary-700) 100%);
  color: var(--color-neutral-100);
}
@media screen and (min-width: 992px) {
  .pricing-card.featured {
    border: 10px solid white;
    transform: scale(1.09);
  }
}
.pricing-card.featured h3,
.pricing-card.featured .pricing-price,
.pricing-card.featured .pricing-period,
.pricing-card.featured .pricing-features li {
  color: var(--color-neutral-100);
}
.pricing-card.featured .pricing-features li::before {
  color: var(--color-neutral-100);
}
.pricing-card.featured .pricing-price {
  color: #2d5016;
}
.pricing-card.featured .pricing-price .currency,
.pricing-card.featured .pricing-price .small-text {
  color: rgba(255, 255, 255, 0.95);
}
.pricing-card h3 {
  font-size: var(--fs-600);
  font-weight: 600;
  margin-bottom: 30px;
}
.pricing-card .pricing-period {
  opacity: 0.6;
}

.pricing-discount {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-neutral-100);
  color: var(--color-primary);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: var(--fs-100);
  font-weight: 700;
  text-align: center;
  width: 150px;
  transform: rotate(45deg) translateX(30%) translateY(-10%);
  transform-origin: center;
  z-index: 1;
}

.pricing-header {
  margin-bottom: 30px;
}

.pricing-price {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 10px 0 5px;
  line-height: 1;
}
.pricing-price .currency {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-700);
}
.pricing-price .small-text {
  font-size: var(--fs-400);
  font-weight: 400;
  color: var(--color-neutral-700);
}

.pricing-period {
  color: var(--color-neutral-700);
  font-size: var(--fs-300);
  margin-bottom: 30px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  flex: 1;
}
.pricing-features li {
  padding: 12px 0;
  color: var(--color-neutral-700);
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-300);
  line-height: var(--line-height-relaxed);
}
.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--fs-500);
}

.pricing-cta {
  margin-top: auto;
}

.btn-pricing {
  width: 100%;
  padding: 14px;
  border-radius: var(--border-radius);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  border: none;
  font-size: var(--fs-400);
  display: block;
  text-align: center;
  cursor: pointer;
}

.btn-pricing-primary {
  background: var(--color-neutral-900);
  color: var(--color-neutral-100);
}
.btn-pricing-primary:hover {
  background: #1a1a1a;
  color: var(--color-neutral-100);
  transform: translateY(-2px);
}

.btn-pricing-featured {
  background: var(--color-neutral-100);
  color: var(--color-primary-700);
  font-weight: 700;
}
.btn-pricing-featured:hover {
  background: #f8f9fa;
  color: var(--color-primary-700);
  transform: translateY(-2px);
}

.btn-pricing-secondary {
  background: transparent;
  color: var(--color-neutral-900);
  border: 2px solid var(--border-color);
}
.btn-pricing-secondary:hover {
  border-color: var(--color-neutral-900);
  color: var(--color-neutral-900);
}

.references {
  padding: var(--section-padding-y) 0;
  background: var(--color-neutral-100);
}

.references-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 992px) {
  .references-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .references-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .references-grid {
    grid-template-columns: 1fr;
  }
}

.reference-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
}
.reference-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  filter: grayscale(100%);
}
.reference-item:hover img {
  transform: scale(1.05);
  filter: grayscale(0%);
}
.reference-item:hover .reference-overlay {
  transform: translateY(0);
}

.reference-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  padding: 20px;
  color: var(--color-neutral-100);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
}

.reference-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: var(--fs-500);
}

.reference-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reference-tag {
  background: var(--color-primary);
  color: var(--color-neutral-100);
  padding: 3px 10px;
  border-radius: var(--border-radius-sm);
  font-size: var(--fs-100);
}

.about {
  padding: var(--section-padding-y) 0;
  background: var(--color-neutral-200);
}
.about p {
  color: var(--color-neutral-700);
  line-height: var(--line-height-loose);
  margin-bottom: 20px;
  text-align: justify;
}
.about strong {
  color: var(--color-neutral-900);
}
.about .list.tile {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 576px) {
  .about .list.tile {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  .about .list.tile {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tech-item {
  background: var(--color-neutral-100);
  padding: 20px;
  text-align: center;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}
.tech-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
}
.tech-item .icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}
.tech-item span {
  display: block;
  font-size: var(--fs-300);
  color: var(--color-neutral-700);
  font-weight: 600;
}

.faq {
  padding: var(--section-padding-y) 0;
  background: var(--color-neutral-100);
}
.faq .accordion-button {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-200);
  padding: 25px;
}
.faq .accordion-button:not(.collapsed) {
  color: var(--color-primary);
  box-shadow: none;
}
.faq .accordion-button:not(.collapsed)::after {
  filter: none;
}
.faq .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238bc34a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.faq .accordion-item {
  border: 0;
  border-radius: var(--card-radius) !important;
  overflow: hidden;
  margin-bottom: 12px;
}
.faq .accordion-item:nth-child(even) .accordion-header button {
  background: var(--color-neutral-100);
}
.faq .accordion-item:nth-child(odd) .accordion-header button {
  background: var(--color-neutral-200);
}
.faq .accordion-item:first-of-type, .faq .accordion-item:last-of-type {
  border-radius: var(--card-radius) !important;
}
.faq .accordion-item .accordion-header {
  padding: var(--spacing-0);
}
.faq .accordion-body {
  color: var(--color-neutral-700);
  line-height: var(--line-height-loose);
  padding: 20px 25px;
}

.cta {
  position: relative;
  z-index: 0;
  padding: var(--section-padding-y) 0;
  background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary) 100%);
  color: var(--color-neutral-100);
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url(../../assets/imgs/footer.webp) center/cover repeat-x;
  background-size: 50%;
  opacity: 0.1;
  z-index: -1;
}
.cta h2 {
  color: var(--color-neutral-100);
  margin-bottom: 20px;
}
.cta .section-title::after {
  background: var(--color-neutral-100);
}
.cta .lead {
  font-size: var(--fs-600);
  margin-bottom: 40px;
  opacity: 0.95;
}

.process-steps {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 50px 0;
  flex-wrap: wrap;
}

.process-step {
  flex: 1;
  max-width: 250px;
  min-width: 200px;
}
.process-step h4 {
  color: var(--color-neutral-100);
  margin-bottom: 10px;
  font-size: var(--fs-500);
}
.process-step p {
  font-size: var(--fs-300);
  opacity: 0.9;
  margin: 0;
}

.process-step-number {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-600);
  font-weight: 700;
  margin: 0 auto 15px;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-cta-primary {
  background: var(--color-neutral-100);
  color: var(--color-primary);
  padding: 15px 40px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  border: 2px solid var(--color-neutral-100);
}
.btn-cta-primary:hover {
  background: transparent;
  color: var(--color-neutral-100);
  transform: translateY(-2px);
}

.btn-cta-secondary {
  background: transparent;
  color: var(--color-neutral-100);
  padding: 15px 40px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.btn-cta-secondary:hover {
  border-color: var(--color-neutral-100);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.contact {
  padding: var(--section-padding-y) 0;
  background: var(--color-primary-700);
  color: var(--color-neutral-100);
}
.contact .section-title {
  color: var(--color-neutral-100);
}
.contact .section-title::after {
  background: var(--color-neutral-100);
}

.contact-details {
  list-style: none;
  padding: 0;
}
.contact-details li {
  margin-bottom: 15px;
  font-size: var(--fs-500);
}
.contact-details a {
  color: var(--color-neutral-100);
  text-decoration: none;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
}
.contact-details a:hover {
  opacity: 0.8;
}

.contact-avatar {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--card-radius);
  padding: 40px;
  text-align: center;
  font-size: 8rem;
}

.features-table {
  font-size: var(--fs-300);
}
.features-table th {
  background: var(--color-neutral-200);
  font-weight: 600;
  padding: 12px 8px;
  vertical-align: middle;
}
.features-table td {
  padding: 10px 8px;
  vertical-align: middle;
}
.features-table tbody tr:hover {
  background: var(--color-neutral-300);
}

.payment-page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 40px 16px;
}
.payment-page .payment-header {
  text-align: center;
  margin-bottom: 32px;
}
.payment-page .payment-header .payment-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
.payment-page .payment-header h1 {
  font-size: var(--fs-800);
  font-weight: 700;
  margin-bottom: 8px;
}
.payment-page .payment-header p {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
}
.payment-page .order-summary {
  background: var(--color-neutral-100);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.payment-page .order-summary .order-summary-title {
  padding: 14px 20px;
  font-size: var(--fs-400);
  font-weight: 700;
  background: var(--color-neutral-200);
  border-bottom: 1px solid var(--color-neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.payment-page .order-summary .order-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-neutral-400);
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
}
.payment-page .order-summary .order-row:last-child {
  border-bottom: none;
}
.payment-page .order-summary .order-row.order-row--total {
  font-weight: 700;
  font-size: var(--fs-600);
  color: var(--color-neutral-900);
  background: var(--color-neutral-200);
}
.payment-page .order-summary .order-row .order-row-value {
  font-weight: 600;
  color: var(--color-neutral-900);
}
.payment-page .payment-methods {
  margin-bottom: 24px;
}
.payment-page .payment-methods .payment-methods-title {
  font-size: var(--fs-600);
  font-weight: 600;
  margin-bottom: 14px;
}
.payment-page .payment-methods .payment-method-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--color-neutral-400);
  border-radius: var(--border-radius);
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color background 0.2s ease;
  -webkit-transition: border-color background 0.2s ease;
  -moz-transition: border-color background 0.2s ease;
}
.payment-page .payment-methods .payment-method-option input[type=radio] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.payment-page .payment-methods .payment-method-option .method-logo {
  height: 24px;
  width: auto;
}
.payment-page .payment-methods .payment-method-option .method-label {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--color-neutral-900);
}
.payment-page .payment-methods .payment-method-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-100);
}
.payment-page .payment-result {
  text-align: center;
  padding: 40px 24px;
  background: var(--color-neutral-100);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.payment-page .payment-result.payment-result--success .result-icon {
  color: var(--color-primary);
}
.payment-page .payment-result.payment-result--error .result-icon {
  color: var(--color-secondary);
}
.payment-page .payment-result .result-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
}
.payment-page .payment-result .result-title {
  font-size: var(--fs-800);
  font-weight: 700;
  margin-bottom: 8px;
}
.payment-page .payment-result .result-text {
  font-size: var(--fs-400);
  color: var(--color-neutral-700);
  margin-bottom: 24px;
}

:root {
  --stepper-max-width: 600px;
}

.stepper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
  max-width: 600px;
  margin-bottom: 48px;
  margin-inline: auto;
}
.stepper::before {
  display: none;
}
.stepper .stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.stepper .stepper-step + .stepper-step::before {
  content: "";
  position: absolute;
  top: 40px;
  right: calc(100% + 8px);
  width: 40px;
  border-top: 2px dashed rgba(255, 255, 255, 0.25);
}
.stepper .stepper-step .stepper-step__icon-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 5px;
}
.stepper .stepper-step .stepper-step__icon-wrap .stepper-step__icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepper .stepper-step .stepper-step__icon-wrap .stepper-step__icon-circle svg {
  width: 36px;
  height: 36px;
}
.stepper .stepper-step .stepper-step__icon-wrap .stepper-step__badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #6fbf4a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #2d5a27;
}
.stepper .stepper-step .stepper-step__label {
  font-size: 0.9rem;
  font-weight: 600;
}

@media (max-width: 640px) {
  .stepper {
    flex-direction: column;
    gap: 36px;
    align-items: center;
  }
  .stepper .stepper-step + .stepper-step::before {
    display: none;
  }
}
a[class^=btn]:hover, a[class^=btn]:focus, a[class^=btn]:active {
  text-decoration: none !important;
}

#cc-main {
  --cc-z-index: 999;
}/*# sourceMappingURL=style.css.map */