@charset "UTF-8";

:root,.p-theme-light{--p-border-radius-0:0rem;--p-border-radius-050:0.125rem;--p-border-radius-100:0.25rem;--p-border-radius-150:0.375rem;--p-border-radius-200:0.5rem;--p-border-radius-300:0.75rem;--p-border-radius-400:1rem;--p-border-radius-500:1.25rem;--p-border-radius-750:1.875rem;--p-border-radius-full:624.9375rem;--p-border-width-0:0rem;--p-border-width-0165:0.04125rem;--p-border-width-025:0.0625rem;--p-border-width-050:0.125rem;--p-border-width-100:0.25rem;--p-breakpoints-xs:0rem;--p-breakpoints-sm:30.625rem;--p-breakpoints-md:48rem;--p-breakpoints-lg:65rem;--p-breakpoints-xl:90rem;color-scheme:light;--p-color-bg:rgba(241, 241, 241, 1);--p-color-bg-inverse:rgba(26, 26, 26, 1);--p-color-bg-surface:rgba(255, 255, 255, 1);--p-color-bg-surface-hover:rgba(247, 247, 247, 1);--p-color-bg-surface-active:rgba(243, 243, 243, 1);--p-color-bg-surface-selected:rgba(241, 241, 241, 1);--p-color-bg-surface-disabled:rgba(0, 0, 0, 0.05);--p-color-bg-surface-secondary:rgba(247, 247, 247, 1);--p-color-bg-surface-secondary-hover:rgba(241, 241, 241, 1);--p-color-bg-surface-secondary-active:rgba(235, 235, 235, 1);--p-color-bg-surface-secondary-selected:rgba(235, 235, 235, 1);--p-color-bg-surface-tertiary:rgba(243, 243, 243, 1);--p-color-bg-surface-tertiary-hover:rgba(235, 235, 235, 1);--p-color-bg-surface-tertiary-active:rgba(227, 227, 227, 1);--p-color-bg-surface-brand:rgba(227, 227, 227, 1);--p-color-bg-surface-brand-hover:rgba(235, 235, 235, 1);--p-color-bg-surface-brand-active:rgba(241, 241, 241, 1);--p-color-bg-surface-brand-selected:rgba(241, 241, 241, 1);--p-color-bg-surface-info:rgba(234, 244, 255, 1);--p-color-bg-surface-info-hover:rgba(224, 240, 255, 1);--p-color-bg-surface-info-active:rgba(202, 230, 255, 1);--p-color-bg-surface-success:rgba(205, 254, 212, 1);--p-color-bg-surface-success-hover:rgba(175, 254, 191, 1);--p-color-bg-surface-success-active:rgba(146, 252, 172, 1);--p-color-bg-surface-caution:rgba(255, 248, 219, 1);--p-color-bg-surface-caution-hover:rgba(255, 244, 191, 1);--p-color-bg-surface-caution-active:rgba(255, 239, 157, 1);--p-color-bg-surface-warning:rgba(255, 241, 227, 1);--p-color-bg-surface-warning-hover:rgba(255, 235, 213, 1);--p-color-bg-surface-warning-active:rgba(255, 228, 198, 1);--p-color-bg-surface-critical:rgba(254, 232, 235, 1);--p-color-bg-surface-critical-hover:rgba(254, 225, 230, 1);--p-color-bg-surface-critical-active:rgba(254, 217, 223, 1);--p-color-bg-surface-emphasis:rgba(240, 242, 255, 1);--p-color-bg-surface-emphasis-hover:rgba(234, 237, 255, 1);--p-color-bg-surface-emphasis-active:rgba(226, 231, 255, 1);--p-color-bg-surface-magic:rgba(248, 247, 255, 1);--p-color-bg-surface-magic-hover:rgba(243, 241, 255, 1);--p-color-bg-surface-magic-active:rgba(233, 229, 255, 1);--p-color-bg-surface-inverse:rgba(48, 48, 48, 1);--p-color-bg-surface-transparent:rgba(0, 0, 0, 0);--p-color-bg-fill:rgba(255, 255, 255, 1);--p-color-bg-fill-hover:rgba(250, 250, 250, 1);--p-color-bg-fill-active:rgba(247, 247, 247, 1);--p-color-bg-fill-selected:rgba(204, 204, 204, 1);--p-color-bg-fill-disabled:rgba(0, 0, 0, 0.05);--p-color-bg-fill-secondary:rgba(241, 241, 241, 1);--p-color-bg-fill-secondary-hover:rgba(235, 235, 235, 1);--p-color-bg-fill-secondary-active:rgba(227, 227, 227, 1);--p-color-bg-fill-secondary-selected:rgba(227, 227, 227, 1);--p-color-bg-fill-tertiary:rgba(227, 227, 227, 1);--p-color-bg-fill-tertiary-hover:rgba(212, 212, 212, 1);--p-color-bg-fill-tertiary-active:rgba(204, 204, 204, 1);--p-color-bg-fill-brand:rgba(48, 48, 48, 1);--p-color-bg-fill-brand-hover:rgba(26, 26, 26, 1);--p-color-bg-fill-brand-active:rgba(26, 26, 26, 1);--p-color-bg-fill-brand-selected:rgba(48, 48, 48, 1);--p-color-bg-fill-brand-disabled:rgba(0, 0, 0, 0.17);--p-color-bg-fill-info:rgba(145, 208, 255, 1);--p-color-bg-fill-info-hover:rgba(81, 192, 255, 1);--p-color-bg-fill-info-active:rgba(0, 148, 213, 1);--p-color-bg-fill-info-secondary:rgba(213, 235, 255, 1);--p-color-bg-fill-success:rgba(4, 123, 93, 1);--p-color-bg-fill-success-hover:rgba(3, 94, 76, 1);--p-color-bg-fill-success-active:rgba(1, 75, 64, 1);--p-color-bg-fill-success-secondary:rgba(175, 254, 191, 1);--p-color-bg-fill-warning:rgba(255, 184, 0, 1);--p-color-bg-fill-warning-hover:rgba(229, 165, 0, 1);--p-color-bg-fill-warning-active:rgba(178, 132, 0, 1);--p-color-bg-fill-warning-secondary:rgba(255, 214, 164, 1);--p-color-bg-fill-caution:rgba(255, 230, 0, 1);--p-color-bg-fill-caution-hover:rgba(234, 211, 0, 1);--p-color-bg-fill-caution-active:rgba(225, 203, 0, 1);--p-color-bg-fill-caution-secondary:rgba(255, 235, 120, 1);--p-color-bg-fill-critical:rgba(199, 10, 36, 1);--p-color-bg-fill-critical-hover:rgba(163, 10, 36, 1);--p-color-bg-fill-critical-active:rgba(142, 11, 33, 1);--p-color-bg-fill-critical-selected:rgba(142, 11, 33, 1);--p-color-bg-fill-critical-secondary:rgba(254, 209, 215, 1);--p-color-bg-fill-emphasis:rgba(0, 91, 211, 1);--p-color-bg-fill-emphasis-hover:rgba(0, 66, 153, 1);--p-color-bg-fill-emphasis-active:rgba(0, 46, 106, 1);--p-color-bg-fill-magic:rgba(128, 81, 255, 1);--p-color-bg-fill-magic-secondary:rgba(233, 229, 255, 1);--p-color-bg-fill-magic-secondary-hover:rgba(228, 222, 255, 1);--p-color-bg-fill-magic-secondary-active:rgba(223, 217, 255, 1);--p-color-bg-fill-inverse:rgba(48, 48, 48, 1);--p-color-bg-fill-inverse-hover:rgba(74, 74, 74, 1);--p-color-bg-fill-inverse-active:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent:rgba(0, 0, 0, 0.02);--p-color-bg-fill-transparent-hover:rgba(0, 0, 0, 0.05);--p-color-bg-fill-transparent-active:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-selected:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-secondary:rgba(0, 0, 0, 0.06);--p-color-bg-fill-transparent-secondary-hover:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-secondary-active:rgba(0, 0, 0, 0.11);--p-color-text:rgba(48, 48, 48, 1);--p-color-text-secondary:rgba(97, 97, 97, 1);--p-color-text-disabled:rgba(181, 181, 181, 1);--p-color-text-link:rgba(0, 91, 211, 1);--p-color-text-link-hover:rgba(0, 66, 153, 1);--p-color-text-link-active:rgba(0, 46, 106, 1);--p-color-text-brand:rgba(74, 74, 74, 1);--p-color-text-brand-hover:rgba(48, 48, 48, 1);--p-color-text-brand-on-bg-fill:rgba(255, 255, 255, 1);--p-color-text-brand-on-bg-fill-hover:rgba(227, 227, 227, 1);--p-color-text-brand-on-bg-fill-active:rgba(204, 204, 204, 1);--p-color-text-brand-on-bg-fill-disabled:rgba(255, 255, 255, 1);--p-color-text-info:rgba(0, 58, 90, 1);--p-color-text-info-hover:rgba(0, 58, 90, 1);--p-color-text-info-active:rgba(0, 33, 51, 1);--p-color-text-info-secondary:rgba(0, 124, 180, 1);--p-color-text-info-on-bg-fill:rgba(0, 33, 51, 1);--p-color-text-success:rgba(1, 75, 64, 1);--p-color-text-success-hover:rgba(7, 54, 48, 1);--p-color-text-success-active:rgba(2, 38, 34, 1);--p-color-text-success-secondary:rgba(4, 123, 93, 1);--p-color-text-success-on-bg-fill:rgba(250, 255, 251, 1);--p-color-text-caution:rgba(79, 71, 0, 1);--p-color-text-caution-hover:rgba(51, 46, 0, 1);--p-color-text-caution-active:rgba(31, 28, 0, 1);--p-color-text-caution-secondary:rgba(130, 117, 0, 1);--p-color-text-caution-on-bg-fill:rgba(51, 46, 0, 1);--p-color-text-warning:rgba(94, 66, 0, 1);--p-color-text-warning-hover:rgba(65, 45, 0, 1);--p-color-text-warning-active:rgba(37, 26, 0, 1);--p-color-text-warning-secondary:rgba(149, 111, 0, 1);--p-color-text-warning-on-bg-fill:rgba(37, 26, 0, 1);--p-color-text-critical:rgba(142, 11, 33, 1);--p-color-text-critical-hover:rgba(95, 7, 22, 1);--p-color-text-critical-active:rgba(47, 4, 11, 1);--p-color-text-critical-secondary:rgba(199, 10, 36, 1);--p-color-text-critical-on-bg-fill:rgba(255, 250, 251, 1);--p-color-text-emphasis:rgba(0, 91, 211, 1);--p-color-text-emphasis-hover:rgba(0, 66, 153, 1);--p-color-text-emphasis-active:rgba(0, 46, 106, 1);--p-color-text-emphasis-on-bg-fill:rgba(252, 253, 255, 1);--p-color-text-emphasis-on-bg-fill-hover:rgba(226, 231, 255, 1);--p-color-text-emphasis-on-bg-fill-active:rgba(213, 220, 255, 1);--p-color-text-magic:rgba(87, 0, 209, 1);--p-color-text-magic-secondary:rgba(113, 38, 255, 1);--p-color-text-magic-on-bg-fill:rgba(253, 253, 255, 1);--p-color-text-inverse:rgba(227, 227, 227, 1);--p-color-text-inverse-secondary:rgba(181, 181, 181, 1);--p-color-text-link-inverse:rgba(197, 208, 255, 1);--p-color-border:rgba(227, 227, 227, 1);--p-color-border-hover:rgba(204, 204, 204, 1);--p-color-border-disabled:rgba(235, 235, 235, 1);--p-color-border-secondary:rgba(235, 235, 235, 1);--p-color-border-tertiary:rgba(204, 204, 204, 1);--p-color-border-focus:rgba(0, 91, 211, 1);--p-color-border-brand:rgba(227, 227, 227, 1);--p-color-border-info:rgba(168, 216, 255, 1);--p-color-border-success:rgba(146, 252, 172, 1);--p-color-border-caution:rgba(255, 235, 120, 1);--p-color-border-warning:rgba(255, 200, 121, 1);--p-color-border-critical:rgba(254, 193, 199, 1);--p-color-border-critical-secondary:rgba(142, 11, 33, 1);--p-color-border-emphasis:rgba(0, 91, 211, 1);--p-color-border-emphasis-hover:rgba(0, 66, 153, 1);--p-color-border-emphasis-active:rgba(0, 46, 106, 1);--p-color-border-magic:rgba(228, 222, 255, 1);--p-color-border-magic-secondary:rgba(148, 116, 255, 1);--p-color-border-magic-secondary-hover:rgba(128, 81, 255, 1);--p-color-border-inverse:rgba(97, 97, 97, 1);--p-color-border-inverse-hover:rgba(204, 204, 204, 1);--p-color-border-inverse-active:rgba(227, 227, 227, 1);--p-color-tooltip-tail-down-border:rgba(212, 212, 212, 1);--p-color-tooltip-tail-up-border:rgba(227, 227, 227, 1);--p-color-icon:rgba(74, 74, 74, 1);--p-color-icon-hover:rgba(48, 48, 48, 1);--p-color-icon-active:rgba(26, 26, 26, 1);--p-color-icon-disabled:rgba(204, 204, 204, 1);--p-color-icon-secondary:rgba(138, 138, 138, 1);--p-color-icon-secondary-hover:rgba(97, 97, 97, 1);--p-color-icon-secondary-active:rgba(74, 74, 74, 1);--p-color-icon-brand:rgba(26, 26, 26, 1);--p-color-icon-info:rgba(0, 148, 213, 1);--p-color-icon-success:rgba(4, 123, 93, 1);--p-color-icon-caution:rgba(153, 138, 0, 1);--p-color-icon-warning:rgba(178, 132, 0, 1);--p-color-icon-critical:rgba(226, 44, 56, 1);--p-color-icon-emphasis:rgba(0, 91, 211, 1);--p-color-icon-emphasis-hover:rgba(0, 66, 153, 1);--p-color-icon-emphasis-active:rgba(0, 46, 106, 1);--p-color-icon-magic:rgba(128, 81, 255, 1);--p-color-icon-inverse:rgba(227, 227, 227, 1);--p-color-avatar-bg-fill:rgba(181, 181, 181, 1);--p-color-avatar-five-bg-fill:rgba(253, 75, 146, 1);--p-color-avatar-five-text-on-bg-fill:rgba(255, 246, 248, 1);--p-color-avatar-four-bg-fill:rgba(81, 192, 255, 1);--p-color-avatar-four-text-on-bg-fill:rgba(0, 33, 51, 1);--p-color-avatar-one-bg-fill:rgba(197, 48, 197, 1);--p-color-avatar-one-text-on-bg-fill:rgba(253, 239, 253, 1);--p-color-avatar-seven-bg-fill:rgba(148, 116, 255, 1);--p-color-avatar-seven-text-on-bg-fill:rgba(248, 247, 255, 1);--p-color-avatar-six-bg-fill:rgba(37, 232, 43, 1);--p-color-avatar-six-text-on-bg-fill:rgba(3, 61, 5, 1);--p-color-avatar-text-on-bg-fill:rgba(255, 255, 255, 1);--p-color-avatar-three-bg-fill:rgba(44, 224, 212, 1);--p-color-avatar-three-text-on-bg-fill:rgba(3, 60, 57, 1);--p-color-avatar-two-bg-fill:rgba(82, 244, 144, 1);--p-color-avatar-two-text-on-bg-fill:rgba(1, 75, 64, 1);--p-color-backdrop-bg:rgba(0, 0, 0, 0.71);--p-color-button-gradient-bg-fill:linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%);--p-color-checkbox-bg-surface-disabled:rgba(0, 0, 0, 0.08);--p-color-checkbox-icon-disabled:rgba(255, 255, 255, 1);--p-color-input-bg-surface:rgba(253, 253, 253, 1);--p-color-input-bg-surface-hover:rgba(250, 250, 250, 1);--p-color-input-bg-surface-active:rgba(247, 247, 247, 1);--p-color-input-border:rgba(138, 138, 138, 1);--p-color-input-border-hover:rgba(97, 97, 97, 1);--p-color-input-border-active:rgba(26, 26, 26, 1);--p-color-nav-bg:rgba(235, 235, 235, 1);--p-color-nav-bg-surface:rgba(0, 0, 0, 0.02);--p-color-nav-bg-surface-hover:rgba(241, 241, 241, 1);--p-color-nav-bg-surface-active:rgba(250, 250, 250, 1);--p-color-nav-bg-surface-selected:rgba(250, 250, 250, 1);--p-color-radio-button-bg-surface-disabled:rgba(0, 0, 0, 0.08);--p-color-radio-button-icon-disabled:rgba(255, 255, 255, 1);--p-color-video-thumbnail-play-button-bg-fill-hover:rgba(0, 0, 0, 0.81);--p-color-video-thumbnail-play-button-bg-fill:rgba(0, 0, 0, 0.71);--p-color-video-thumbnail-play-button-text-on-bg-fill:rgba(255, 255, 255, 1);--p-color-scrollbar-thumb-bg-hover:rgba(138, 138, 138, 1);--p-color-scrollbar-thumb-bg:rgba(181, 181, 181, 1);--p-font-family-sans:'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;--p-font-family-mono:ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;--p-font-size-275:0.6875rem;--p-font-size-300:0.75rem;--p-font-size-325:0.8125rem;--p-font-size-350:0.875rem;--p-font-size-400:1rem;--p-font-size-450:1.125rem;--p-font-size-500:1.25rem;--p-font-size-550:1.375rem;--p-font-size-600:1.5rem;--p-font-size-750:1.875rem;--p-font-size-800:2rem;--p-font-size-900:2.25rem;--p-font-size-1000:2.5rem;--p-font-weight-regular:450;--p-font-weight-medium:550;--p-font-weight-semibold:650;--p-font-weight-bold:700;--p-font-letter-spacing-densest:-0.03375rem;--p-font-letter-spacing-denser:-0.01875rem;--p-font-letter-spacing-dense:-0.0125rem;--p-font-letter-spacing-normal:0rem;--p-font-line-height-300:0.75rem;--p-font-line-height-400:1rem;--p-font-line-height-500:1.25rem;--p-font-line-height-600:1.5rem;--p-font-line-height-700:1.75rem;--p-font-line-height-800:2rem;--p-font-line-height-1000:2.5rem;--p-font-line-height-1200:3rem;--p-height-0:0rem;--p-height-025:0.0625rem;--p-height-050:0.125rem;--p-height-100:0.25rem;--p-height-150:0.375rem;--p-height-200:0.5rem;--p-height-300:0.75rem;--p-height-400:1rem;--p-height-500:1.25rem;--p-height-600:1.5rem;--p-height-700:1.75rem;--p-height-800:2rem;--p-height-900:2.25rem;--p-height-1000:2.5rem;--p-height-1200:3rem;--p-height-1600:4rem;--p-height-2000:5rem;--p-height-2400:6rem;--p-height-2800:7rem;--p-height-3200:8rem;--p-motion-duration-0:0ms;--p-motion-duration-50:50ms;--p-motion-duration-100:100ms;--p-motion-duration-150:150ms;--p-motion-duration-200:200ms;--p-motion-duration-250:250ms;--p-motion-duration-300:300ms;--p-motion-duration-350:350ms;--p-motion-duration-400:400ms;--p-motion-duration-450:450ms;--p-motion-duration-500:500ms;--p-motion-duration-5000:5000ms;--p-motion-ease:cubic-bezier(0.25, 0.1, 0.25, 1);--p-motion-ease-in:cubic-bezier(0.42, 0, 1, 1);--p-motion-ease-out:cubic-bezier(0.19, 0.91, 0.38, 1);--p-motion-ease-in-out:cubic-bezier(0.42, 0, 0.58, 1);--p-motion-linear:cubic-bezier(0, 0, 1, 1);--p-motion-keyframes-bounce:p-motion-keyframes-bounce;--p-motion-keyframes-fade-in:p-motion-keyframes-fade-in;--p-motion-keyframes-pulse:p-motion-keyframes-pulse;--p-motion-keyframes-spin:p-motion-keyframes-spin;--p-motion-keyframes-appear-above:p-motion-keyframes-appear-above;--p-motion-keyframes-appear-below:p-motion-keyframes-appear-below;--p-shadow-0:none;--p-shadow-100:0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07);--p-shadow-200:0rem 0.1875rem 0.0625rem -0.0625rem rgba(26, 26, 26, 0.07);--p-shadow-300:0rem 0.25rem 0.375rem -0.125rem rgba(26, 26, 26, 0.20);--p-shadow-400:0rem 0.5rem 1rem -0.25rem rgba(26, 26, 26, 0.22);--p-shadow-500:0rem 0.75rem 1.25rem -0.5rem rgba(26, 26, 26, 0.24);--p-shadow-600:0rem 1.25rem 1.25rem -0.5rem rgba(26, 26, 26, 0.28);--p-shadow-bevel-100:0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, -0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, 0rem -0.0625rem 0rem 0rem rgba(0, 0, 0, 0.17) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.5) inset;--p-shadow-inset-100:0rem 0.0625rem 0.125rem 0rem rgba(26, 26, 26, 0.15) inset, 0rem 0.0625rem 0.0625rem 0rem rgba(26, 26, 26, 0.15) inset;--p-shadow-inset-200:0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.20) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset, -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset;--p-shadow-button:0rem -0.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.1) inset, 0rem 0.03125rem 0rem 0.09375rem #FFF inset;--p-shadow-button-hover:0rem 0.0625rem 0rem 0rem #EBEBEB inset, -0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0rem -0.0625rem 0rem 0rem #CCC inset;--p-shadow-button-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset;--p-shadow-button-primary:0rem -0.0625rem 0rem 0.0625rem rgba(0, 0, 0, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(48, 48, 48, 1) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.25) inset;--p-shadow-button-primary-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.24) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.0625rem 0rem 0rem #000 inset, 0rem -0.0625rem 0rem 0.0625rem #1A1A1A;--p-shadow-button-primary-inset:0rem 0.1875rem 0rem 0rem rgb(0, 0, 0) inset;--p-shadow-button-primary-critical:0rem -0.0625rem 0rem 0.0625rem rgba(142, 31, 11, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(181, 38, 11, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.349) inset;--p-shadow-button-primary-critical-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset;--p-shadow-button-primary-critical-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;--p-shadow-button-primary-success:0rem -0.0625rem 0rem 0.0625rem rgba(12, 81, 50, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(19, 111, 69, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.251) inset;--p-shadow-button-primary-success-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset;--p-shadow-button-primary-success-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;--p-shadow-border-inset:0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.08) inset;--p-space-0:0rem;--p-space-025:0.0625rem;--p-space-050:0.125rem;--p-space-100:0.25rem;--p-space-150:0.375rem;--p-space-200:0.5rem;--p-space-300:0.75rem;--p-space-400:1rem;--p-space-500:1.25rem;--p-space-600:1.5rem;--p-space-800:2rem;--p-space-1000:2.5rem;--p-space-1200:3rem;--p-space-1600:4rem;--p-space-2000:5rem;--p-space-2400:6rem;--p-space-2800:7rem;--p-space-3200:8rem;--p-space-button-group-gap:var(--p-space-200);--p-space-card-gap:var(--p-space-400);--p-space-card-padding:var(--p-space-400);--p-space-table-cell-padding:var(--p-space-150);--p-text-heading-3xl-font-family:var(--p-font-family-sans);--p-text-heading-3xl-font-size:var(--p-font-size-900);--p-text-heading-3xl-font-weight:var(--p-font-weight-bold);--p-text-heading-3xl-font-letter-spacing:var(--p-font-letter-spacing-densest);--p-text-heading-3xl-font-line-height:var(--p-font-line-height-1200);--p-text-heading-2xl-font-family:var(--p-font-family-sans);--p-text-heading-2xl-font-size:var(--p-font-size-750);--p-text-heading-2xl-font-weight:var(--p-font-weight-bold);--p-text-heading-2xl-font-letter-spacing:var(--p-font-letter-spacing-denser);--p-text-heading-2xl-font-line-height:var(--p-font-line-height-1000);--p-text-heading-xl-font-family:var(--p-font-family-sans);--p-text-heading-xl-font-size:var(--p-font-size-600);--p-text-heading-xl-font-weight:var(--p-font-weight-bold);--p-text-heading-xl-font-letter-spacing:var(--p-font-letter-spacing-dense);--p-text-heading-xl-font-line-height:var(--p-font-line-height-800);--p-text-heading-lg-font-family:var(--p-font-family-sans);--p-text-heading-lg-font-size:var(--p-font-size-500);--p-text-heading-lg-font-weight:var(--p-font-weight-semibold);--p-text-heading-lg-font-letter-spacing:var(--p-font-letter-spacing-dense);--p-text-heading-lg-font-line-height:var(--p-font-line-height-600);--p-text-heading-md-font-family:var(--p-font-family-sans);--p-text-heading-md-font-size:var(--p-font-size-350);--p-text-heading-md-font-weight:var(--p-font-weight-semibold);--p-text-heading-md-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-md-font-line-height:var(--p-font-line-height-500);--p-text-heading-sm-font-family:var(--p-font-family-sans);--p-text-heading-sm-font-size:var(--p-font-size-325);--p-text-heading-sm-font-weight:var(--p-font-weight-semibold);--p-text-heading-sm-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-sm-font-line-height:var(--p-font-line-height-500);--p-text-heading-xs-font-family:var(--p-font-family-sans);--p-text-heading-xs-font-size:var(--p-font-size-300);--p-text-heading-xs-font-weight:var(--p-font-weight-semibold);--p-text-heading-xs-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-xs-font-line-height:var(--p-font-line-height-400);--p-text-body-lg-font-family:var(--p-font-family-sans);--p-text-body-lg-font-size:var(--p-font-size-350);--p-text-body-lg-font-weight:var(--p-font-weight-regular);--p-text-body-lg-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-lg-font-line-height:var(--p-font-line-height-500);--p-text-body-md-font-family:var(--p-font-family-sans);--p-text-body-md-font-size:var(--p-font-size-325);--p-text-body-md-font-weight:var(--p-font-weight-regular);--p-text-body-md-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-md-font-line-height:var(--p-font-line-height-500);--p-text-body-sm-font-family:var(--p-font-family-sans);--p-text-body-sm-font-size:var(--p-font-size-300);--p-text-body-sm-font-weight:var(--p-font-weight-regular);--p-text-body-sm-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-sm-font-line-height:var(--p-font-line-height-400);--p-text-body-xs-font-family:var(--p-font-family-sans);--p-text-body-xs-font-size:var(--p-font-size-275);--p-text-body-xs-font-weight:var(--p-font-weight-regular);--p-text-body-xs-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-xs-font-line-height:var(--p-font-line-height-300);--p-width-0:0rem;--p-width-025:0.0625rem;--p-width-050:0.125rem;--p-width-100:0.25rem;--p-width-150:0.375rem;--p-width-200:0.5rem;--p-width-300:0.75rem;--p-width-400:1rem;--p-width-500:1.25rem;--p-width-600:1.5rem;--p-width-700:1.75rem;--p-width-800:2rem;--p-width-900:2.25rem;--p-width-1000:2.5rem;--p-width-1200:3rem;--p-width-1600:4rem;--p-width-2000:5rem;--p-width-2400:6rem;--p-width-2800:7rem;--p-width-3200:8rem;--p-z-index-0:auto;--p-z-index-1:100;--p-z-index-2:400;--p-z-index-3:510;--p-z-index-4:512;--p-z-index-5:513;--p-z-index-6:514;--p-z-index-7:515;--p-z-index-8:516;--p-z-index-9:517;--p-z-index-10:518;--p-z-index-11:519;--p-z-index-12:520;}

.p-theme-light-mobile{--p-color-button-gradient-bg-fill:none;--p-shadow-100:none;--p-shadow-bevel-100:none;--p-shadow-button:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-hover:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-inset:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-primary:none;--p-shadow-button-primary-hover:none;--p-shadow-button-primary-inset:none;--p-shadow-button-primary-critical:none;--p-shadow-button-primary-critical-hover:none;--p-shadow-button-primary-critical-inset:none;--p-shadow-button-primary-success:none;--p-shadow-button-primary-success-hover:none;--p-shadow-button-primary-success-inset:none;--p-space-card-gap:var(--p-space-200);--p-text-heading-2xl-font-size:var(--p-font-size-800);--p-text-heading-xl-font-size:var(--p-font-size-550);--p-text-heading-xl-font-line-height:var(--p-font-line-height-700);--p-text-heading-lg-font-size:var(--p-font-size-450);--p-text-heading-md-font-size:var(--p-font-size-400);--p-text-heading-sm-font-size:var(--p-font-size-350);--p-text-body-lg-font-size:var(--p-font-size-450);--p-text-body-lg-font-line-height:var(--p-font-line-height-700);--p-text-body-md-font-size:var(--p-font-size-400);--p-text-body-md-font-line-height:var(--p-font-line-height-600);--p-text-body-sm-font-size:var(--p-font-size-350);--p-text-body-sm-font-line-height:var(--p-font-line-height-500);--p-text-body-xs-font-size:var(--p-font-size-300);--p-text-body-xs-font-line-height:var(--p-font-line-height-400);}

.p-theme-light-high-contrast-experimental{--p-color-text:rgba(26, 26, 26, 1);--p-color-text-secondary:rgba(26, 26, 26, 1);--p-color-text-brand:rgba(26, 26, 26, 1);--p-color-icon-secondary:rgba(74, 74, 74, 1);--p-color-border:rgba(138, 138, 138, 1);--p-color-input-border:rgba(74, 74, 74, 1);--p-color-border-secondary:rgba(138, 138, 138, 1);--p-color-bg-surface-secondary:rgba(241, 241, 241, 1);--p-shadow-bevel-100:0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07), 0rem 0.0625rem 0rem 0rem rgba(208, 208, 208, 0.40) inset, 0.0625rem 0rem 0rem 0rem #CCC inset, -0.0625rem 0rem 0rem 0rem #CCC inset, 0rem -0.0625rem 0rem 0rem #999 inset;}

.p-theme-dark-experimental{color-scheme:dark;--p-color-bg:rgba(26, 26, 26, 1);--p-color-bg-surface:rgba(48, 48, 48, 1);--p-color-bg-fill:rgba(48, 48, 48, 1);--p-color-icon:rgba(227, 227, 227, 1);--p-color-icon-secondary:rgba(181, 181, 181, 1);--p-color-icon-disabled:rgba(74, 74, 74, 1);--p-color-text:rgba(227, 227, 227, 1);--p-color-text-secondary:rgba(181, 181, 181, 1);--p-color-text-disabled:rgba(74, 74, 74, 1);--p-color-bg-surface-secondary-active:rgba(255, 255, 255, 0.14);--p-color-bg-surface-secondary-hover:rgba(255, 255, 255, 0.06);--p-color-bg-fill-transparent:rgba(255, 255, 255, 0.11);--p-color-bg-fill-brand:rgba(255, 255, 255, 1);--p-color-text-brand-on-bg-fill:rgba(48, 48, 48, 1);--p-color-bg-surface-hover:rgba(74, 74, 74, 1);--p-color-bg-fill-hover:rgba(255, 255, 255, 0.05);--p-color-bg-fill-transparent-hover:rgba(255, 255, 255, 0.14);--p-color-bg-fill-brand-hover:rgba(243, 243, 243, 1);--p-color-bg-surface-selected:rgba(97, 97, 97, 1);--p-color-bg-fill-selected:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent-selected:rgba(255, 255, 255, 0.22);--p-color-bg-fill-brand-selected:rgba(212, 212, 212, 1);--p-color-bg-surface-active:rgba(97, 97, 97, 1);--p-color-bg-fill-active:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent-active:rgba(255, 255, 255, 0.17);--p-color-bg-fill-brand-active:rgba(247, 247, 247, 1);--p-color-bg-fill-secondary:rgba(255, 255, 255, 0.08);--p-color-bg-fill-secondary-hover:rgba(255, 255, 255, 0.11);--p-color-bg-fill-secondary-selected:rgba(255, 255, 255, 0.17);--p-color-bg-surface-brand-selected:rgba(74, 74, 74, 1);--p-color-border-secondary:rgba(74, 74, 74, 1);--p-color-bg-surface-tertiary:rgba(255, 255, 255, 0.08);--p-color-icon-brand:rgba(74, 74, 74, 1);--p-color-bg-fill-disabled:rgba(255, 255, 255, 0.05);--p-color-text-brand-on-bg-fill-disabled:rgba(138, 138, 138, 1);--p-color-bg-fill-brand-disabled:rgba(255, 255, 255, 0.22);--p-color-bg-fill-tertiary:rgba(48, 48, 48, 1);--p-color-tooltip-tail-down-border:rgba(60, 60, 60, 1);--p-color-tooltip-tail-up-border:rgba(71, 71, 71, 1);--p-shadow-bevel-100:0.0625rem 0rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, -0.0625rem 0rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, 0rem -0.0625rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.16) inset;}

@keyframes p-motion-keyframes-bounce{ from, 65%, 85%{ transform:scale(1) } 75%{ transform:scale(0.85) } 82.5%{ transform:scale(1.05) } }

@keyframes p-motion-keyframes-fade-in{ to{ opacity:1 } }

@keyframes p-motion-keyframes-pulse{ from, 75%{ transform:scale(0.85); opacity:1; } to{ transform:scale(2.5); opacity:0; } }

@keyframes p-motion-keyframes-spin{ to{ transform:rotate(1turn) } }

@keyframes p-motion-keyframes-appear-above{ from{ transform:translateY(var(--p-space-100)); opacity:0; } to{ transform:none; opacity:1; } }

@keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } }

:root{
  --polaris-version-number:'13.9.5';

  --pg-navigation-width:15rem;
  --pg-dangerous-magic-space-4:1rem;
  --pg-dangerous-magic-space-5:1.25rem;
  --pg-dangerous-magic-space-8:2rem;

  --pg-layout-width-primary-min:30rem;
  --pg-layout-width-primary-max:41.375rem;
  --pg-layout-width-secondary-min:15rem;
  --pg-layout-width-secondary-max:20rem;
  --pg-layout-width-one-half-width-base:28.125rem;
  --pg-layout-width-one-third-width-base:15rem;
  --pg-layout-width-nav-base:var(--pg-navigation-width);
  --pg-layout-width-page-content-partially-condensed:28.125rem;
  --pg-layout-width-inner-spacing-base:var(--pg-dangerous-magic-space-4);
  --pg-layout-width-outer-spacing-min:var(--pg-dangerous-magic-space-5);
  --pg-layout-width-outer-spacing-max:var(--pg-dangerous-magic-space-8);
  --pg-layout-relative-size:2;

  --pg-dismiss-icon-size:2rem;

  --pg-top-bar-height:3.5rem;

  --pg-mobile-nav-width:calc(100vw - var(--pg-dismiss-icon-size) - var(--pg-dangerous-magic-space-8));

  --pg-control-height:2rem;
  --pg-control-vertical-padding:calc((2.25rem - var(--p-font-line-height-600) - var(--p-space-050))/2);
}

html,
body{
  font-size:var(--p-font-size-325);
  line-height:var(--p-font-line-height-500);
  font-weight:var(--p-font-weight-regular);
  font-feature-settings:'calt' 0;
  letter-spacing:initial;
  color:var(--p-color-text);
  -webkit-tap-highlight-color:transparent;
}

html,
body,
button{
  font-family:var(--p-font-family-sans);
}

html{
  position:relative;
  font-size:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  -webkit-text-size-adjust:100%;

     -moz-text-size-adjust:100%;

          text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  scrollbar-width:thin;
  scrollbar-color:var(--p-color-bg) var(--p-color-bg);
  transition:scrollbar-color var(--p-motion-duration-100) var(--p-motion-ease-in);
}

html::-webkit-scrollbar{
    width:0.6875rem;
    background-color:var(--p-color-bg);
  }

html::-webkit-scrollbar-thumb{
    background-color:var(--p-color-bg);
    border:var(--p-border-width-050) solid transparent;
    border-radius:var(--p-border-radius-300);
    background-clip:content-box;
  }

html:hover{
    scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) var(--p-color-bg);
  }

html:hover::-webkit-scrollbar-thumb{
      background-color:var(--p-color-scrollbar-thumb-bg-hover);
    }

@supports (font: -apple-system-body){
  @media (max-width: 30.6225em){
    html{
      font:-apple-system-body;
    }
  }
}

body{
  min-height:100%;
  margin:0;
  padding:0;
  background-color:rgba(241, 242, 244, 1);
  scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) transparent;
}

@media print{

body{
    background-color:transparent !important;
}
  }

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

h1,
h2,
h3,
h4,
h5,
h6,
p{
  margin:0;
  font-size:1em;
  font-weight:var(--p-font-weight-regular);
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner{
  border-style:none;
}

html[class~='Polaris-Safari-16-Font-Optical-Sizing-Patch']{
  font-variation-settings:'opsz' 14;
}


.Polaris-Avatar{
  --pc-avatar-xs-size:1.25rem;
  --pc-avatar-sm-size:1.5rem;
  --pc-avatar-md-size:1.75rem;
  --pc-avatar-lg-size:2rem;
  --pc-avatar-xl-size:2.5rem;
  position:relative;
  display:block;
  overflow:hidden;
  min-width:var(--pc-avatar-xs-size);
  max-width:100%;
  background:var(--p-color-avatar-bg-fill);
  color:var(--p-color-avatar-text-on-bg-fill);
  -webkit-user-select:none;
          user-select:none;
}

.Polaris-Avatar.Polaris-Avatar--imageHasLoaded{
    background:transparent;
  }

@media (forced-colors: active){

.Polaris-Avatar{
    border:var(--p-border-width-025) solid transparent;
}
  }

.Polaris-Avatar::after{
    content:'';
    display:block;
    padding-bottom:100%;
  }

.Polaris-Avatar__Text{
  font-size:var(--p-font-size-400);
  font-weight:var(--p-font-weight-regular);
}

.Polaris-Avatar__Text.Polaris-Avatar--long{
    font-size:var(--p-font-size-300);
  }

.Polaris-Avatar--hidden{
  visibility:hidden;
}

.Polaris-Avatar--sizeXs{
  width:var(--pc-avatar-xs-size);
  border-radius:0.25rem;
}

.Polaris-Avatar--sizeSm{
  width:var(--pc-avatar-sm-size);
  border-radius:0.375rem;
}

.Polaris-Avatar--sizeMd{
  width:var(--pc-avatar-md-size);
  border-radius:0.375rem;
}

.Polaris-Avatar--sizeLg{
  width:var(--pc-avatar-lg-size);
  border-radius:0.5rem;
}

.Polaris-Avatar--sizeXl{
  width:var(--pc-avatar-xl-size);
  border-radius:0.5rem;
}

.Polaris-Avatar--styleOne{
  background:var(--p-color-avatar-one-bg-fill);
  color:var(--p-color-avatar-one-text-on-bg-fill);
}

.Polaris-Avatar--styleOne svg,
  .Polaris-Avatar--styleOne text{
    color:var(--p-color-avatar-one-text-on-bg-fill);
  }

.Polaris-Avatar--styleTwo{
  background:var(--p-color-avatar-two-bg-fill);
  color:var(--p-color-avatar-two-text-on-bg-fill);
}

.Polaris-Avatar--styleTwo svg,
  .Polaris-Avatar--styleTwo text{
    color:var(--p-color-avatar-two-text-on-bg-fill);
  }

.Polaris-Avatar--styleThree{
  background:var(--p-color-avatar-three-bg-fill);
  color:var(--p-color-avatar-three-text-on-bg-fill);
}

.Polaris-Avatar--styleThree svg,
  .Polaris-Avatar--styleThree text{
    color:var(--p-color-avatar-three-text-on-bg-fill);
  }

.Polaris-Avatar--styleFour{
  background:var(--p-color-avatar-four-bg-fill);
  color:var(--p-color-avatar-four-text-on-bg-fill);
}

.Polaris-Avatar--styleFour svg,
  .Polaris-Avatar--styleFour text{
    color:var(--p-color-avatar-four-text-on-bg-fill);
  }

.Polaris-Avatar--styleFive{
  background:var(--p-color-avatar-five-bg-fill);
  color:var(--p-color-avatar-five-text-on-bg-fill);
}

.Polaris-Avatar--styleFive svg,
  .Polaris-Avatar--styleFive text{
    color:var(--p-color-avatar-five-text-on-bg-fill);
  }

.Polaris-Avatar--styleSix{
  background:var(--p-color-avatar-six-bg-fill);
  color:var(--p-color-avatar-six-text-on-bg-fill);
}

.Polaris-Avatar--styleSix svg,
  .Polaris-Avatar--styleSix text{
    color:var(--p-color-avatar-six-text-on-bg-fill);
  }

.Polaris-Avatar--styleSeven{
  background:var(--p-color-avatar-seven-bg-fill);
  color:var(--p-color-avatar-seven-text-on-bg-fill);
}

.Polaris-Avatar--styleSeven svg,
  .Polaris-Avatar--styleSeven text{
    color:var(--p-color-avatar-seven-text-on-bg-fill);
  }

.Polaris-Avatar--imageHasLoaded{
  background:transparent;
}

.Polaris-Avatar__Image{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  border-radius:inherit;
  transform:translate(-50%, -50%);
  object-fit:cover;
}

.Polaris-Avatar__Initials{
  position:absolute;
  top:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.Polaris-Avatar__Svg{
  width:100%;
  height:100%;
}


.Polaris-Text--root{
  margin:0;
  text-align:inherit;
}

.Polaris-Text--block{
  display:block;
}

.Polaris-Text--truncate{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.Polaris-Text--visuallyHidden{
  position: absolute !important;
  top: 0;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.Polaris-Text--start{
  text-align:start;
}

.Polaris-Text--center{
  text-align:center;
}

.Polaris-Text--end{
  text-align:end;
}

.Polaris-Text--justify{
  text-align:justify;
}

.Polaris-Text--base{
  color:var(--p-color-text);
}

.Polaris-Text--inherit{
  color:inherit;
}

.Polaris-Text--disabled{
  color:var(--p-color-text-disabled);
}

.Polaris-Text--success{
  color:var(--p-color-text-success);
}

.Polaris-Text--critical{
  color:var(--p-color-text-critical);
}

.Polaris-Text--caution{
  color:var(--p-color-text-caution);
}

.Polaris-Text--subdued{
  color:var(--p-color-text-secondary);
}

.Polaris-Text--magic{
  color:var(--p-color-text-magic);
}

.Polaris-Text__magic--subdued{
  color:var(--p-color-text-magic-secondary);
}

.Polaris-Text__text--inverse{
  color:var(--p-color-text-inverse);
}

.Polaris-Text--textInverseSecondary{
  color:var(--p-color-text-inverse-secondary);
}

.Polaris-Text--headingXs{
  font-size:var(--p-text-heading-xs-font-size);
  font-weight:var(--p-text-heading-xs-font-weight);
  letter-spacing:var(--p-text-heading-xs-font-letter-spacing);
  line-height:var(--p-text-heading-xs-font-line-height);
}

.Polaris-Text--headingSm{
  font-size:var(--p-text-heading-sm-font-size);
  font-weight:var(--p-text-heading-sm-font-weight);
  letter-spacing:var(--p-text-heading-sm-font-letter-spacing);
  line-height:var(--p-text-heading-sm-font-line-height);
}

.Polaris-Text--headingMd{
  font-size:var(--p-text-heading-md-font-size);
  font-weight:var(--p-text-heading-md-font-weight);
  letter-spacing:var(--p-text-heading-md-font-letter-spacing);
  line-height:var(--p-text-heading-md-font-line-height);
}

.Polaris-Text--headingLg{
  font-size:var(--p-text-heading-lg-font-size);
  font-weight:var(--p-text-heading-lg-font-weight);
  letter-spacing:var(--p-text-heading-lg-font-letter-spacing);
  line-height:var(--p-text-heading-lg-font-line-height);
}

.Polaris-Text--headingXl{
  font-size:var(--p-font-size-500);
  font-weight:var(--p-font-weight-semibold);
  letter-spacing:var(--p-font-letter-spacing-dense);
  line-height:var(--p-font-line-height-600);
}

@media (min-width: 48em){

.Polaris-Text--headingXl{
    font-size:var(--p-text-heading-xl-font-size);
    font-weight:var(--p-text-heading-xl-font-weight);
    letter-spacing:var(--p-text-heading-xl-font-letter-spacing);
    line-height:var(--p-text-heading-xl-font-line-height);
}
  }

.Polaris-Text--heading2xl{
  font-size:var(--p-font-size-600);
  font-weight:var(--p-font-weight-bold);
  letter-spacing:var(--p-font-letter-spacing-dense);
  line-height:var(--p-font-line-height-800);
}

@media (min-width: 48em){

.Polaris-Text--heading2xl{
    font-size:var(--p-text-heading-2xl-font-size);
    font-weight:var(--p-text-heading-2xl-font-weight);
    letter-spacing:var(--p-text-heading-2xl-font-letter-spacing);
    line-height:var(--p-text-heading-2xl-font-line-height);
}
  }

.Polaris-Text--heading3xl{
  font-size:var(--p-font-size-750);
  font-weight:var(--p-font-weight-bold);
  letter-spacing:var(--p-font-letter-spacing-denser);
  line-height:var(--p-font-line-height-1000);
}

@media (min-width: 48em){

.Polaris-Text--heading3xl{
    font-size:var(--p-text-heading-3xl-font-size);
    font-weight:var(--p-text-heading-3xl-font-weight);
    letter-spacing:var(--p-text-heading-3xl-font-letter-spacing);
    line-height:var(--p-text-heading-3xl-font-line-height);
}
  }

.Polaris-Text--bodyXs{
  font-size:var(--p-text-body-xs-font-size);
  font-weight:var(--p-text-body-xs-font-weight);
  letter-spacing:var(--p-text-body-xs-font-letter-spacing);
  line-height:var(--p-text-body-xs-font-line-height);
}

.Polaris-Text--bodySm{
  font-size:var(--p-text-body-sm-font-size);
  font-weight:var(--p-text-body-sm-font-weight);
  letter-spacing:var(--p-text-body-sm-font-letter-spacing);
  line-height:var(--p-text-body-sm-font-line-height);
}

.Polaris-Text--bodyMd{
  font-size:var(--p-text-body-md-font-size);
  font-weight:var(--p-text-body-sm-font-weight);
  letter-spacing:var(--p-text-body-md-font-letter-spacing);
  line-height:var(--p-text-body-md-font-line-height);
}

.Polaris-Text--bodyLg{
  font-size:var(--p-text-body-lg-font-size);
  font-weight:var(--p-text-body-sm-font-weight);
  letter-spacing:var(--p-text-body-lg-font-letter-spacing);
  line-height:var(--p-text-body-lg-font-line-height);
}

.Polaris-Text--regular{
  font-weight:var(--p-font-weight-regular);
}

.Polaris-Text--medium{
  font-weight:var(--p-font-weight-medium);
}

.Polaris-Text--semibold{
  font-weight:var(--p-font-weight-semibold);
}

.Polaris-Text--bold{
  font-weight:var(--p-font-weight-bold);
}

.Polaris-Text--break{
  overflow-wrap:anywhere;
  word-break:normal;
}

.Polaris-Text--numeric{
  font-variant-numeric:tabular-nums lining-nums;
}

.Polaris-Text__line--through{
  -webkit-text-decoration-line:line-through;
          text-decoration-line:line-through;
}


.Polaris-Icon{
  display:block;
  height:1.25rem;
  width:1.25rem;

  max-height:100%;
  max-width:100%;
  margin:auto;
}

.Polaris-Icon svg{
  fill:currentColor;
}

.Polaris-Icon--toneInherit svg{
  color:inherit;
}

.Polaris-Icon--toneBase svg{
  color:var(--p-color-icon);
}

.Polaris-Icon--toneSubdued svg{
  color:var(--p-color-icon-secondary);
}

.Polaris-Icon--toneCaution svg{
  color:var(--p-color-icon-caution);
}

.Polaris-Icon--toneWarning svg{
  color:var(--p-color-icon-warning);
}

.Polaris-Icon--toneCritical svg{
  color:var(--p-color-icon-critical);
}

.Polaris-Icon--toneInteractive svg{
  color:var(--p-color-icon-emphasis);
}

.Polaris-Icon--toneInfo svg{
  color:var(--p-color-icon-info);
}

.Polaris-Icon--toneSuccess svg{
  color:var(--p-color-icon-success);
}

.Polaris-Icon--tonePrimary svg{
  color:var(--p-color-icon-brand);
}

.Polaris-Icon--toneEmphasis svg{
  color:var(--p-color-icon-emphasis);
}

.Polaris-Icon--toneMagic svg{
  color:var(--p-color-icon-magic);
}

.Polaris-Icon--toneTextCaution svg{
  color:var(--p-color-text-caution);
}

.Polaris-Icon--toneTextWarning svg{
  color:var(--p-color-text-warning);
}

.Polaris-Icon--toneTextCritical svg{
  color:var(--p-color-text-critical);
}

.Polaris-Icon--toneTextInfo svg{
  color:var(--p-color-text-info);
}

.Polaris-Icon--toneTextPrimary svg{
  color:var(--p-color-text-brand);
}

.Polaris-Icon--toneTextSuccess svg{
  color:var(--p-color-text-success);
}

.Polaris-Icon--toneTextMagic svg{
  color:var(--p-color-text-magic);
}

.Polaris-Icon__Svg,
.Polaris-Icon__Img{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  max-height:100%;
}

.Polaris-Icon__Placeholder{
  padding-bottom:100%;
  background:var(--p-color-bg-fill-tertiary);
  border-radius:var(--p-border-radius-100);
}


.Polaris-Spinner svg{
  animation:var(--p-motion-keyframes-spin) var(--p-motion-duration-500) linear infinite;
  fill:var(--p-color-bg-fill-brand);
}

.Polaris-Spinner--sizeSmall svg{
  height:1.25rem;
  width:1.25rem;
}

.Polaris-Spinner--sizeLarge svg{
  height:2.75rem;
  width:2.75rem;
}


.Polaris-Button{
  --pc-button-gap:var(--p-space-050);
  --pc-button-bg:transparent;
  --pc-button-bg_hover:var(--pc-button-bg);
  --pc-button-bg_active:var(--pc-button-bg);
  --pc-button-bg_pressed:var(--pc-button-bg_active);
  --pc-button-bg_disabled:var(--p-color-bg-fill-disabled);
  --pc-button-color:inherit;
  --pc-button-color_hover:var(--pc-button-color);
  --pc-button-color_active:var(--pc-button-color);
  --pc-button-color_pressed:var(--pc-button-color_active);
  --pc-button-color_disabled:var(--p-color-text-disabled);
  --pc-button-box-shadow:transparent;
  --pc-button-box-shadow_hover:var(--pc-button-box-shadow);
  --pc-button-box-shadow_active:var(--pc-button-box-shadow);
  --pc-button-box-shadow_pressed:var(--pc-button-box-shadow_active);
  --pc-button-box-shadow_disabled:var(--pc-button-box-shadow);
  --pc-button-icon-fill:currentColor;
  --pc-button-icon-fill_hover:var(--pc-button-icon-fill);
  --pc-button-icon-fill_active:var(--pc-button-icon-fill);
  --pc-button-icon-fill_pressed:var(--pc-button-icon-fill_active);
  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);
  all:unset;
  position:relative;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  gap:var(--pc-button-gap);
  padding:var(--pc-button-padding-block) var(--pc-button-padding-inline);
  background:var(--pc-button-bg);
  border:none;
  border-radius:var(--p-border-radius-200);
  box-shadow:var(--pc-button-box-shadow);
  color:var(--pc-button-color);
  cursor:pointer;
  -webkit-user-select:none;
          user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.Polaris-Button.Polaris-Button svg{
  fill:var(--pc-button-icon-fill);
}

.Polaris-Button.Polaris-Button:hover svg{
  fill:var(--pc-button-icon-fill_hover);
}

.Polaris-Button.Polaris-Button:active,
.Polaris-Button.Polaris-Button[data-state='open'] svg{
  fill:var(--pc-button-icon-fill_active);
}

.Polaris-Button.Polaris-Button:disabled,
.Polaris-Button.Polaris-Button[disabled],
.Polaris-Button--disabled.Polaris-Button--disabled svg{
  fill:var(--pc-button-icon-fill_disabled);
}

.Polaris-Button--pressed.Polaris-Button--pressed,
.Polaris-Button--pressed.Polaris-Button--pressed:hover,
.Polaris-Button--pressed.Polaris-Button--pressed:active,
.Polaris-Button--pressed.Polaris-Button--pressed:focus-visible svg{
  fill:var(--pc-button-icon-fill_pressed);
}

.Polaris-Button:hover{
  background:var(--pc-button-bg_hover);
  color:var(--pc-button-color_hover);
  box-shadow:var(--pc-button-box-shadow_hover);
}

.Polaris-Button:active,
.Polaris-Button[data-state='open']{
  background:var(--pc-button-bg_active);
  color:var(--pc-button-color_active);
  box-shadow:var(--pc-button-box-shadow_active);
}

.Polaris-Button:focus-visible{
  background:var(--pc-button-bg_hover);
  color:var(--pc-button-color_hover);
  outline:var(--p-border-width-050) solid var(--p-color-border-focus);
  outline-offset:var(--p-space-025);
}

.Polaris-Button:focus-visible::after{
    content:none;
  }

.Polaris-Button:disabled,
.Polaris-Button[disabled],
.Polaris-Button--disabled{
  background:var(--pc-button-bg_disabled);
  color:var(--pc-button-color_disabled);
  box-shadow:none;
  -webkit-user-select:none;
          user-select:none;
  pointer-events:none;
}

.Polaris-Button--pressed,
.Polaris-Button--pressed:hover,
.Polaris-Button--pressed:active,
.Polaris-Button--pressed:focus-visible{
  background:var(--pc-button-bg_pressed);
  color:var(--pc-button-color_pressed);
  box-shadow:var(--pc-button-box-shadow_pressed);
}

.Polaris-Button--variantPrimary{
  --pc-button-bg-gradient:var(--p-color-button-gradient-bg-fill);
  --pc-button-box-shadow:var(--p-shadow-button-primary);
  --pc-button-box-shadow_active:var(--p-shadow-button-primary-inset);
  --pc-button-bg:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
  --pc-button-bg_hover:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover);
  --pc-button-bg_active:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active);
  --pc-button-bg_disabled:var(--p-color-bg-fill-brand-disabled);
  --pc-button-color:var(--p-color-text-brand-on-bg-fill);
  --pc-button-color_disabled:var(--p-color-text-brand-on-bg-fill-disabled);
  --pc-button-icon-fill:var(--p-color-text-brand-on-bg-fill);
  --pc-button-icon-fill_disabled:var(--p-color-text-brand-on-bg-fill-disabled);
}

.Polaris-Button--variantSecondary{
  --pc-button-box-shadow:var(--p-shadow-button);
  --pc-button-box-shadow_active:var(--p-shadow-button-inset);
  --pc-button-bg:var(--p-color-bg-fill);
  --pc-button-bg_hover:var(--p-color-bg-fill-hover);
  --pc-button-bg_active:var(--p-color-bg-fill-active);
  --pc-button-bg_pressed:var(--p-color-bg-fill-selected);
  --pc-button-color:var(--p-color-text);
  --pc-button-icon-fill:var(--p-color-icon);
}

.Polaris-Button--variantTertiary{
  --pc-button-bg_hover:var(--p-color-bg-fill-transparent-hover);
  --pc-button-bg_active:var(--p-color-bg-fill-transparent-active);
  --pc-button-bg_pressed:var(--p-color-bg-fill-selected);
  --pc-button-bg_disabled:transparent;
  --pc-button-color:var(--p-color-text);
  --pc-button-icon-fill:var(--p-color-icon);
}

.Polaris-Button--variantPlain{
  --pc-button-color:var(--p-color-text-link);
  --pc-button-color_hover:var(--p-color-text-link-hover);
  --pc-button-color_active:var(--p-color-text-link-active);
}

.Polaris-Button--variantPlain:is(:hover, :active, :focus-visible):not(.Polaris-Button--removeUnderline){
  text-decoration:underline;
}

.Polaris-Button--variantMonochromePlain{
  --pc-button-icon-fill:currentColor;
}

.Polaris-Button--variantPlain,
.Polaris-Button--variantMonochromePlain{
  --pc-button-bg_disabled:transparent;
  margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1);
}

.Polaris-Button--variantPlain:focus-visible,
.Polaris-Button--variantMonochromePlain:focus-visible{
  border-radius:var(--p-border-radius-300);
  outline-offset:calc(var(--pc-button-padding-block)*-1);
}

.Polaris-Button--toneSuccess:is(.Polaris-Button--variantSecondary, .Polaris-Button--variantTertiary, .Polaris-Button--variantPlain){
  --pc-button-color:var(--p-color-text-success);
  --pc-button-color_hover:var(--p-color-text-success-hover);
  --pc-button-color_active:var(--p-color-text-success-active);
  --pc-button-icon-fill:currentColor;
}

.Polaris-Button--toneCritical:is(.Polaris-Button--variantSecondary, .Polaris-Button--variantTertiary, .Polaris-Button--variantPlain){
  --pc-button-color:var(--p-color-text-critical);
  --pc-button-color_hover:var(--p-color-text-critical-hover);
  --pc-button-color_active:var(--p-color-text-critical-active);
  --pc-button-icon-fill:currentColor;
}

.Polaris-Button--toneSuccess:is(.Polaris-Button--variantPrimary){
  --pc-button-box-shadow:var(--p-shadow-button-primary-success);
  --pc-button-box-shadow_active:var(--p-shadow-button-primary-success-inset);
  --pc-button-bg:var(--p-color-bg-fill-success);
  --pc-button-bg_hover:var(--p-color-bg-fill-success-hover);
  --pc-button-bg_active:var(--p-color-bg-fill-success-active);
  --pc-button-bg_pressed:var(--p-color-bg-fill-success-selected);
}

.Polaris-Button--toneCritical:is(.Polaris-Button--variantPrimary){
  --pc-button-box-shadow:var(--p-shadow-button-primary-critical);
  --pc-button-box-shadow_active:var(--p-shadow-button-primary-critical-inset);
  --pc-button-bg:var(--p-color-bg-fill-critical);
  --pc-button-bg_hover:var(--p-color-bg-fill-critical-hover);
  --pc-button-bg_active:var(--p-color-bg-fill-critical-active);
  --pc-button-bg_pressed:var(--p-color-bg-fill-critical-selected);
}

.Polaris-Button--sizeMicro{
  --pc-button-padding-block:var(--p-space-100);
  --pc-button-padding-inline:var(--p-space-200);
  min-height:var(--p-height-700);
  min-width:var(--p-width-700);
}

@media (min-width: 48em){

.Polaris-Button--sizeMicro{
    min-height:var(--p-height-600);
    min-width:var(--p-width-600);
}
  }

.Polaris-Button--sizeSlim,
.Polaris-Button--sizeMedium{
  --pc-button-padding-block:var(--p-space-150);
  --pc-button-padding-inline:var(--p-space-300);
  min-height:var(--p-height-800);
  min-width:var(--p-width-800);
}

@media (min-width: 48em){

.Polaris-Button--sizeSlim,
.Polaris-Button--sizeMedium{
    min-height:var(--p-height-700);
    min-width:var(--p-width-700);
}
  }

.Polaris-Button--sizeLarge{
  --pc-button-padding-block:var(--p-space-150);
  --pc-button-padding-inline:var(--p-space-300);
  min-height:var(--p-height-900);
  min-width:var(--p-height-900);
}

@media (min-width: 48em){

.Polaris-Button--sizeLarge{
    min-height:var(--p-height-800);
    min-width:var(--p-width-800);
}
  }

.Polaris-Button--textAlignCenter{
  justify-content:center;
  text-align:center;
}

.Polaris-Button--textAlignStart,
.Polaris-Button--textAlignLeft{
  justify-content:start;
  text-align:start;
}

.Polaris-Button--textAlignEnd,
.Polaris-Button--textAlignRight{
  justify-content:end;
  text-align:end;
}

.Polaris-Button--fullWidth{
  width:100%;
}

.Polaris-Button--iconOnly{
  --pc-button-padding-block:var(--p-space-100);
  --pc-button-padding-inline:var(--p-space-100);
}

.Polaris-Button--iconOnly:is(.Polaris-Button--sizeLarge){
  --pc-button-padding-block:var(--p-space-150);
  --pc-button-padding-inline:var(--p-space-150);
}

.Polaris-Button--iconOnly:is(.Polaris-Button--sizeMicro){
  --pc-button-padding-block:var(--p-space-050);
  --pc-button-padding-inline:var(--p-space-050);
}

.Polaris-Button--iconOnly:is(.Polaris-Button--variantTertiary){
  margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1);
}

.Polaris-Button--iconOnly:is(.Polaris-Button--variantTertiary, .Polaris-Button--variantPlain):not(.Polaris-Button--toneCritical){
  --pc-button-icon-fill:var(--p-color-icon-secondary);
  --pc-button-icon-fill_hover:var(--p-color-icon-secondary-hover);
  --pc-button-icon-fill_active:var(--p-color-icon-secondary-active);
  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);
}

.Polaris-Button--iconOnly:is(.Polaris-Button--variantMonochromePlain){
  --pc-button-icon-fill:currentColor;
  --pc-button-icon-fill_hover:var(--p-color-icon-secondary-hover);
  --pc-button-icon-fill_active:var(--p-color-icon-secondary-active);
  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);
}

.Polaris-Button--iconOnly:is(.Polaris-Button--variantPlain, .Polaris-Button--variantMonochromePlain){
  --pc-button-padding-block:0;
  --pc-button-padding-inline:0;
  margin:0;
  min-height:var(--p-height-500);
  min-width:var(--p-width-500);
}

.Polaris-Button--iconWithText:not(.Polaris-Button--variantPlain, .Polaris-Button--variantMonochromePlain){
  padding-left:calc(var(--pc-button-padding-inline)*0.5);
}

.Polaris-Button--disclosure:not(.Polaris-Button--variantPlain, .Polaris-Button--variantMonochromePlain){
  padding-right:calc(var(--pc-button-padding-inline)*0.5);
}

.Polaris-Button--disclosure:is(.Polaris-Button--textAlignStart, .Polaris-Button--textAlignLeft){
  justify-content:space-between;
}

.Polaris-Button--loading{
  color:transparent;
}

.Polaris-Button--pressable:active:not(.Polaris-Button--variantTertiary, .Polaris-Button--variantPlain, .Polaris-Button--variantMonochromePlain)
  > *{
  transform:translate3d(0, 0.0625rem, 0);
}

.Polaris-Button--hidden{
  visibility:hidden;
}

.Polaris-Button__Icon{
  margin:calc(var(--p-space-050)*-1) 0;
}

.Polaris-Button__Spinner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.Polaris-Button__Spinner svg{
    fill:var(--pc-button-icon-fill_disabled);
    vertical-align:middle;
  }

[data-buttongroup-variant='segmented']
  > *:not(:first-child)
  .Polaris-Button:is(.Polaris-Button--variantPrimary){
  margin-left:calc(var(--p-space-025)*-1);
}

[data-buttongroup-variant='segmented'] > *:not(:first-child) .Polaris-Button{
  border-top-left-radius:var(--p-border-radius-0);
  border-bottom-left-radius:var(--p-border-radius-0);
}

[data-buttongroup-variant='segmented'] > *:not(:last-child) .Polaris-Button{
  border-top-right-radius:var(--p-border-radius-0);
  border-bottom-right-radius:var(--p-border-radius-0);
}

[data-buttongroup-full-width='true'] .Polaris-Button{
  width:100%;
}

@media (min-width: 48em){

[data-buttongroup-full-width='true'] .Polaris-Button{
    white-space:nowrap;
}
  }

[data-buttongroup-connected-top='true'] > *:first-child .Polaris-Button{
  border-top-left-radius:var(--p-border-radius-0);
}

[data-buttongroup-connected-top='true'] > *:last-child .Polaris-Button{
  border-top-right-radius:var(--p-border-radius-0);
}


.Polaris-SettingAction{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin-top:calc(var(--p-space-400)*-1);
  margin-left:calc(var(--p-space-400)*-1);
}

.Polaris-SettingAction__Setting,
.Polaris-SettingAction__Action{
  flex:0 0 auto;
  margin-top:var(--p-space-400);
  margin-left:var(--p-space-400);
  max-width:calc(100% - var(--p-space-400));
  min-width:0;
}

.Polaris-SettingAction__Setting{
  flex:1 0 21.875rem;
}

@media (min-width: 48em){

.Polaris-SettingAction__Action{
    margin-top:var(--p-space-600);
}
  }


.Polaris-Box--listReset{
  list-style-type:none;
  margin-block-start:0;
  margin-block-end:0;
  outline:none;
  padding-inline-start:0;
}

.Polaris-Box{
  --pc-box-padding-block-end-xs: initial;
  --pc-box-padding-block-end-sm: initial;
  --pc-box-padding-block-end-md: initial;
  --pc-box-padding-block-end-lg: initial;
  --pc-box-padding-block-end-xl: initial;
  padding-block-end: var(--pc-box-padding-block-end-xs);
  --pc-box-padding-block-start-xs: initial;
  --pc-box-padding-block-start-sm: initial;
  --pc-box-padding-block-start-md: initial;
  --pc-box-padding-block-start-lg: initial;
  --pc-box-padding-block-start-xl: initial;
  padding-block-start: var(--pc-box-padding-block-start-xs);
  --pc-box-padding-inline-start-xs: initial;
  --pc-box-padding-inline-start-sm: initial;
  --pc-box-padding-inline-start-md: initial;
  --pc-box-padding-inline-start-lg: initial;
  --pc-box-padding-inline-start-xl: initial;
  padding-inline-start: var(--pc-box-padding-inline-start-xs);
  --pc-box-padding-inline-end-xs: initial;
  --pc-box-padding-inline-end-sm: initial;
  --pc-box-padding-inline-end-md: initial;
  --pc-box-padding-inline-end-lg: initial;
  --pc-box-padding-inline-end-xl: initial;
  padding-inline-end: var(--pc-box-padding-inline-end-xs);
  --pc-box-shadow:initial;
  --pc-box-background:initial;
  --pc-box-border-radius:initial;
  --pc-box-border-end-start-radius:var(--pc-box-border-radius);
  --pc-box-border-end-end-radius:var(--pc-box-border-radius);
  --pc-box-border-start-start-radius:var(--pc-box-border-radius);
  --pc-box-border-start-end-radius:var(--pc-box-border-radius);
  --pc-box-color:initial;
  --pc-box-min-height:initial;
  --pc-box-min-width:initial;
  --pc-box-max-width:initial;
  --pc-box-outline-color:initial;
  --pc-box-outline-style:initial;
  --pc-box-outline-width:initial;
  --pc-box-overflow-x:initial;
  --pc-box-overflow-y:initial;
  --pc-box-width:initial;
  --pc-box-border-style:initial;
  --pc-box-border-color:initial;
  --pc-box-border-width:0;
  --pc-box-border-block-start-width:var(--pc-box-border-width);
  --pc-box-border-block-end-width:var(--pc-box-border-width);
  --pc-box-border-inline-start-width:var(--pc-box-border-width);
  --pc-box-border-inline-end-width:var(--pc-box-border-width);
  --pc-box-inset-block-start:initial;
  --pc-box-inset-block-end:initial;
  --pc-box-inset-inline-start:initial;
  --pc-box-inset-inline-end:initial;
  inset-block-start:var(--pc-box-inset-block-start);
  inset-block-end:var(--pc-box-inset-block-end);
  inset-inline-start:var(--pc-box-inset-inline-start);
  inset-inline-end:var(--pc-box-inset-inline-end);
  background-color:var(--pc-box-background);
  box-shadow:var(--pc-box-shadow);
  border-end-start-radius:var(--pc-box-border-end-start-radius);
  border-end-end-radius:var(--pc-box-border-end-end-radius);
  border-start-start-radius:var(--pc-box-border-start-start-radius);
  border-start-end-radius:var(--pc-box-border-start-end-radius);
  border-color:var(--pc-box-border-color);
  border-style:var(--pc-box-border-style);
  border-block-start-width:var(--pc-box-border-block-start-width);
  border-block-end-width:var(--pc-box-border-block-end-width);
  border-inline-start-width:var(--pc-box-border-inline-start-width);
  border-inline-end-width:var(--pc-box-border-inline-end-width);
  color:var(--pc-box-color);
  min-height:var(--pc-box-min-height);
  min-width:var(--pc-box-min-width);
  max-width:var(--pc-box-max-width);
  outline-color:var(--pc-box-outline-color);
  outline-style:var(--pc-box-outline-style);
  outline-width:var(--pc-box-outline-width);
  overflow-x:var(--pc-box-overflow-x);
  overflow-y:var(--pc-box-overflow-y);
  width:var(--pc-box-width);
  -webkit-overflow-scrolling:touch;
}

@media (min-width: 30.625em) {

.Polaris-Box{
    padding-block-end: var(
        --pc-box-padding-block-end-sm,
        var(--pc-box-padding-block-end-xs)
      );
}
}

@media (min-width: 48em) {

.Polaris-Box{
    padding-block-end: var(
        --pc-box-padding-block-end-md,
        var(
          --pc-box-padding-block-end-sm,
          var(--pc-box-padding-block-end-xs)
        )
      );
}
}

@media (min-width: 65em) {

.Polaris-Box{
    padding-block-end: var(
        --pc-box-padding-block-end-lg,
        var(
          --pc-box-padding-block-end-md,
          var(
            --pc-box-padding-block-end-sm,
            var(--pc-box-padding-block-end-xs)
          )
        )
      );
}
}

@media (min-width: 90em) {

.Polaris-Box{
    padding-block-end: var(
        --pc-box-padding-block-end-xl,
        var(
          --pc-box-padding-block-end-lg,
          var(
            --pc-box-padding-block-end-md,
            var(
              --pc-box-padding-block-end-sm,
              var(--pc-box-padding-block-end-xs)
            )
          )
        )
      );
}
}

@media (min-width: 30.625em) {

.Polaris-Box{
    padding-block-start: var(
        --pc-box-padding-block-start-sm,
        var(--pc-box-padding-block-start-xs)
      );
}
}

@media (min-width: 48em) {

.Polaris-Box{
    padding-block-start: var(
        --pc-box-padding-block-start-md,
        var(
          --pc-box-padding-block-start-sm,
          var(--pc-box-padding-block-start-xs)
        )
      );
}
}

@media (min-width: 65em) {

.Polaris-Box{
    padding-block-start: var(
        --pc-box-padding-block-start-lg,
        var(
          --pc-box-padding-block-start-md,
          var(
            --pc-box-padding-block-start-sm,
            var(--pc-box-padding-block-start-xs)
          )
        )
      );
}
}

@media (min-width: 90em) {

.Polaris-Box{
    padding-block-start: var(
        --pc-box-padding-block-start-xl,
        var(
          --pc-box-padding-block-start-lg,
          var(
            --pc-box-padding-block-start-md,
            var(
              --pc-box-padding-block-start-sm,
              var(--pc-box-padding-block-start-xs)
            )
          )
        )
      );
}
}

@media (min-width: 30.625em) {

.Polaris-Box{
    padding-inline-start: var(
        --pc-box-padding-inline-start-sm,
        var(--pc-box-padding-inline-start-xs)
      );
}
}

@media (min-width: 48em) {

.Polaris-Box{
    padding-inline-start: var(
        --pc-box-padding-inline-start-md,
        var(
          --pc-box-padding-inline-start-sm,
          var(--pc-box-padding-inline-start-xs)
        )
      );
}
}

@media (min-width: 65em) {

.Polaris-Box{
    padding-inline-start: var(
        --pc-box-padding-inline-start-lg,
        var(
          --pc-box-padding-inline-start-md,
          var(
            --pc-box-padding-inline-start-sm,
            var(--pc-box-padding-inline-start-xs)
          )
        )
      );
}
}

@media (min-width: 90em) {

.Polaris-Box{
    padding-inline-start: var(
        --pc-box-padding-inline-start-xl,
        var(
          --pc-box-padding-inline-start-lg,
          var(
            --pc-box-padding-inline-start-md,
            var(
              --pc-box-padding-inline-start-sm,
              var(--pc-box-padding-inline-start-xs)
            )
          )
        )
      );
}
}

@media (min-width: 30.625em) {

.Polaris-Box{
    padding-inline-end: var(
        --pc-box-padding-inline-end-sm,
        var(--pc-box-padding-inline-end-xs)
      );
}
}

@media (min-width: 48em) {

.Polaris-Box{
    padding-inline-end: var(
        --pc-box-padding-inline-end-md,
        var(
          --pc-box-padding-inline-end-sm,
          var(--pc-box-padding-inline-end-xs)
        )
      );
}
}

@media (min-width: 65em) {

.Polaris-Box{
    padding-inline-end: var(
        --pc-box-padding-inline-end-lg,
        var(
          --pc-box-padding-inline-end-md,
          var(
            --pc-box-padding-inline-end-sm,
            var(--pc-box-padding-inline-end-xs)
          )
        )
      );
}
}

@media (min-width: 90em) {

.Polaris-Box{
    padding-inline-end: var(
        --pc-box-padding-inline-end-xl,
        var(
          --pc-box-padding-inline-end-lg,
          var(
            --pc-box-padding-inline-end-md,
            var(
              --pc-box-padding-inline-end-sm,
              var(--pc-box-padding-inline-end-xs)
            )
          )
        )
      );
}
}

.Polaris-Box--visuallyHidden{
  position: absolute !important;
  top: 0;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

@media print{

.Polaris-Box--printHidden{
    display:none !important;
}
  }


.Polaris-ShadowBevel{
  overflow:clip;
  z-index:0;

  --pc-shadow-bevel-z-index: initial;

  --pc-shadow-bevel-box-shadow-xs: initial;

  --pc-shadow-bevel-box-shadow-sm: initial;

  --pc-shadow-bevel-box-shadow-md: initial;

  --pc-shadow-bevel-box-shadow-lg: initial;

  --pc-shadow-bevel-box-shadow-xl: initial;

  --pc-shadow-bevel-box-shadow: var(--pc-shadow-bevel-box-shadow-xs);
  --pc-shadow-bevel-border-radius-xs: initial;
  --pc-shadow-bevel-border-radius-sm: initial;
  --pc-shadow-bevel-border-radius-md: initial;
  --pc-shadow-bevel-border-radius-lg: initial;
  --pc-shadow-bevel-border-radius-xl: initial;
  --pc-shadow-bevel-border-radius: var(--pc-shadow-bevel-border-radius-xs);
  --pc-shadow-bevel-content-xs: initial;
  --pc-shadow-bevel-content-sm: initial;
  --pc-shadow-bevel-content-md: initial;
  --pc-shadow-bevel-content-lg: initial;
  --pc-shadow-bevel-content-xl: initial;
  --pc-shadow-bevel-content: var(--pc-shadow-bevel-content-xs);

  position: relative;

  box-shadow: var(--pc-shadow-bevel-box-shadow);

  border-radius: var(--pc-shadow-bevel-border-radius);
}
@media (min-width: 30.625em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-box-shadow: var(
        --pc-shadow-bevel-box-shadow-sm,
        var(--pc-shadow-bevel-box-shadow-xs)
      );
}
}
@media (min-width: 48em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-box-shadow: var(
        --pc-shadow-bevel-box-shadow-md,
        var(
          --pc-shadow-bevel-box-shadow-sm,
          var(--pc-shadow-bevel-box-shadow-xs)
        )
      );
}
}
@media (min-width: 65em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-box-shadow: var(
        --pc-shadow-bevel-box-shadow-lg,
        var(
          --pc-shadow-bevel-box-shadow-md,
          var(
            --pc-shadow-bevel-box-shadow-sm,
            var(--pc-shadow-bevel-box-shadow-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-box-shadow: var(
        --pc-shadow-bevel-box-shadow-xl,
        var(
          --pc-shadow-bevel-box-shadow-lg,
          var(
            --pc-shadow-bevel-box-shadow-md,
            var(
              --pc-shadow-bevel-box-shadow-sm,
              var(--pc-shadow-bevel-box-shadow-xs)
            )
          )
        )
      );
}
}
@media (min-width: 30.625em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-border-radius: var(
        --pc-shadow-bevel-border-radius-sm,
        var(--pc-shadow-bevel-border-radius-xs)
      );
}
}
@media (min-width: 48em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-border-radius: var(
        --pc-shadow-bevel-border-radius-md,
        var(
          --pc-shadow-bevel-border-radius-sm,
          var(--pc-shadow-bevel-border-radius-xs)
        )
      );
}
}
@media (min-width: 65em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-border-radius: var(
        --pc-shadow-bevel-border-radius-lg,
        var(
          --pc-shadow-bevel-border-radius-md,
          var(
            --pc-shadow-bevel-border-radius-sm,
            var(--pc-shadow-bevel-border-radius-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-border-radius: var(
        --pc-shadow-bevel-border-radius-xl,
        var(
          --pc-shadow-bevel-border-radius-lg,
          var(
            --pc-shadow-bevel-border-radius-md,
            var(
              --pc-shadow-bevel-border-radius-sm,
              var(--pc-shadow-bevel-border-radius-xs)
            )
          )
        )
      );
}
}
@media (min-width: 30.625em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-content: var(
        --pc-shadow-bevel-content-sm,
        var(--pc-shadow-bevel-content-xs)
      );
}
}
@media (min-width: 48em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-content: var(
        --pc-shadow-bevel-content-md,
        var(
          --pc-shadow-bevel-content-sm,
          var(--pc-shadow-bevel-content-xs)
        )
      );
}
}
@media (min-width: 65em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-content: var(
        --pc-shadow-bevel-content-lg,
        var(
          --pc-shadow-bevel-content-md,
          var(
            --pc-shadow-bevel-content-sm,
            var(--pc-shadow-bevel-content-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
  .Polaris-ShadowBevel{
    --pc-shadow-bevel-content: var(
        --pc-shadow-bevel-content-xl,
        var(
          --pc-shadow-bevel-content-lg,
          var(
            --pc-shadow-bevel-content-md,
            var(
              --pc-shadow-bevel-content-sm,
              var(--pc-shadow-bevel-content-xs)
            )
          )
        )
      );
}
}
.Polaris-ShadowBevel::before {
  content: var(--pc-shadow-bevel-content);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--pc-shadow-bevel-z-index);
  box-shadow: var(--p-shadow-bevel-100);
  border-radius: var(--pc-shadow-bevel-border-radius);
  pointer-events: none;
  mix-blend-mode: luminosity;
}


.Polaris-InlineStack{
  --pc-inline-stack-gap-xs: initial;
  --pc-inline-stack-gap-sm: initial;
  --pc-inline-stack-gap-md: initial;
  --pc-inline-stack-gap-lg: initial;
  --pc-inline-stack-gap-xl: initial;
  gap: var(--pc-inline-stack-gap-xs);
  --pc-inline-stack-flex-direction-xs: initial;
  --pc-inline-stack-flex-direction-sm: initial;
  --pc-inline-stack-flex-direction-md: initial;
  --pc-inline-stack-flex-direction-lg: initial;
  --pc-inline-stack-flex-direction-xl: initial;
  flex-direction: var(--pc-inline-stack-flex-direction-xs);
  display:flex;
  flex-wrap:var(--pc-inline-stack-wrap);
  align-items:var(--pc-inline-stack-block-align);
  justify-content:var(--pc-inline-stack-align);
}
@media (min-width: 30.625em) {
  .Polaris-InlineStack{
    gap: var(
        --pc-inline-stack-gap-sm,
        var(--pc-inline-stack-gap-xs)
      );
}
}
@media (min-width: 48em) {
  .Polaris-InlineStack{
    gap: var(
        --pc-inline-stack-gap-md,
        var(
          --pc-inline-stack-gap-sm,
          var(--pc-inline-stack-gap-xs)
        )
      );
}
}
@media (min-width: 65em) {
  .Polaris-InlineStack{
    gap: var(
        --pc-inline-stack-gap-lg,
        var(
          --pc-inline-stack-gap-md,
          var(
            --pc-inline-stack-gap-sm,
            var(--pc-inline-stack-gap-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
  .Polaris-InlineStack{
    gap: var(
        --pc-inline-stack-gap-xl,
        var(
          --pc-inline-stack-gap-lg,
          var(
            --pc-inline-stack-gap-md,
            var(
              --pc-inline-stack-gap-sm,
              var(--pc-inline-stack-gap-xs)
            )
          )
        )
      );
}
}
@media (min-width: 30.625em) {
  .Polaris-InlineStack{
    flex-direction: var(
        --pc-inline-stack-flex-direction-sm,
        var(--pc-inline-stack-flex-direction-xs)
      );
}
}
@media (min-width: 48em) {
  .Polaris-InlineStack{
    flex-direction: var(
        --pc-inline-stack-flex-direction-md,
        var(
          --pc-inline-stack-flex-direction-sm,
          var(--pc-inline-stack-flex-direction-xs)
        )
      );
}
}
@media (min-width: 65em) {
  .Polaris-InlineStack{
    flex-direction: var(
        --pc-inline-stack-flex-direction-lg,
        var(
          --pc-inline-stack-flex-direction-md,
          var(
            --pc-inline-stack-flex-direction-sm,
            var(--pc-inline-stack-flex-direction-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
  .Polaris-InlineStack{
    flex-direction: var(
        --pc-inline-stack-flex-direction-xl,
        var(
          --pc-inline-stack-flex-direction-lg,
          var(
            --pc-inline-stack-flex-direction-md,
            var(
              --pc-inline-stack-flex-direction-sm,
              var(--pc-inline-stack-flex-direction-xs)
            )
          )
        )
      );
}
}


.Polaris-BlockStack{
  --pc-block-stack-gap-xs: initial;
  --pc-block-stack-gap-sm: initial;
  --pc-block-stack-gap-md: initial;
  --pc-block-stack-gap-lg: initial;
  --pc-block-stack-gap-xl: initial;
  gap: var(--pc-block-stack-gap-xs);
  --pc-block-stack-align:initial;
  --pc-block-stack-inline-align:initial;
  --pc-block-stack-order:initial;
  display:flex;
  flex-direction:var(--pc-block-stack-order);
  align-items:var(--pc-block-stack-inline-align);
  justify-content:var(--pc-block-stack-align);
}

@media (min-width: 30.625em) {

.Polaris-BlockStack{
    gap: var(
        --pc-block-stack-gap-sm,
        var(--pc-block-stack-gap-xs)
      );
}
}

@media (min-width: 48em) {

.Polaris-BlockStack{
    gap: var(
        --pc-block-stack-gap-md,
        var(
          --pc-block-stack-gap-sm,
          var(--pc-block-stack-gap-xs)
        )
      );
}
}

@media (min-width: 65em) {

.Polaris-BlockStack{
    gap: var(
        --pc-block-stack-gap-lg,
        var(
          --pc-block-stack-gap-md,
          var(
            --pc-block-stack-gap-sm,
            var(--pc-block-stack-gap-xs)
          )
        )
      );
}
}

@media (min-width: 90em) {

.Polaris-BlockStack{
    gap: var(
        --pc-block-stack-gap-xl,
        var(
          --pc-block-stack-gap-lg,
          var(
            --pc-block-stack-gap-md,
            var(
              --pc-block-stack-gap-sm,
              var(--pc-block-stack-gap-xs)
            )
          )
        )
      );
}
}

.Polaris-BlockStack--listReset{
  list-style-type:none;
  margin-block-start:0;
  margin-block-end:0;
  padding-inline-start:0;
}

.Polaris-BlockStack--fieldsetReset{
  border:none;
  margin:0;
  padding:0;
}


.Polaris-Label{
  -webkit-tap-highlight-color:transparent;
}

.Polaris-Label--hidden{
  position: absolute !important;
  top: 0;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.Polaris-Label__Text{
  display:block;
  flex:1 1 auto;
  color:currentColor;
  -webkit-tap-highlight-color:transparent;
}

.Polaris-Label__RequiredIndicator::after{
  content:'*';
  color:var(--p-color-text-critical);
  margin-left:var(--p-space-100);
}


.Polaris-InlineError{
  display:flex;
  color:var(--p-color-text-critical);
  fill:var(--p-color-text-critical);
}

.Polaris-InlineError__Icon{
  fill:var(--p-color-text-critical);
  margin-left:calc(var(--p-space-100)*-1);
  margin-right:var(--p-space-200);
}

.Polaris-InlineError__Icon svg{
    margin-left:var(--p-space-050);
    margin-right:var(--p-space-050);
  }


.Polaris-Labelled--hidden > .Polaris-Labelled__LabelWrapper{
  position: absolute !important;
  top: 0;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.Polaris-Labelled--disabled > .Polaris-Labelled__LabelWrapper{
  color:var(--p-color-text-disabled);
}

.Polaris-Labelled--disabled > .Polaris-Labelled__HelpText > span{
  color:var(--p-color-text-disabled);
}

.Polaris-Labelled--readOnly > .Polaris-Labelled__LabelWrapper{
  color:var(--p-color-text-secondary);
}

.Polaris-Labelled__LabelWrapper{
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:break-word;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:var(--p-space-100);
}

.Polaris-Labelled__HelpText{
  margin-top:var(--p-space-100);
}

.Polaris-Labelled__Error{
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:break-word;
  margin-top:var(--p-space-100);
}

.Polaris-Labelled__Action{
  flex:0 0 auto;
}


.Polaris-Connected{
  --pc-connected-item:10;
  --pc-connected-primary:20;
  --pc-connected-focused:30;
  position:relative;
  display:flex;
  align-items:center;
}

.Polaris-Connected__Item{
  position:relative;
  z-index:var(--pc-connected-item);
  flex:0 0 auto;
}

.Polaris-Connected__Item:not(:first-child){
    margin-left:var(--p-space-100);
  }

.Polaris-Connected__Item--primary{
  z-index:var(--pc-connected-primary);
  flex:1 1 auto;
}

.Polaris-Connected__Item--focused{
  z-index:var(--pc-connected-focused);
}


.Polaris-TextField{
  --pc-text-field-contents:20;
  --pc-text-field-backdrop:10;
  font-size:var(--p-font-size-325);
  font-weight:var(--p-font-weight-regular);
  line-height:var(--p-font-line-height-500);
  border:none;
  letter-spacing:initial;
  position:relative;
  display:flex;
  align-items:center;
  color:var(--p-color-text);
  cursor:text;
}

.Polaris-TextField svg{
    fill:var(--p-color-icon-secondary);
  }

.Polaris-TextField:focus-within .Polaris-TextField__ClearButton{
      visibility:visible;
      opacity:1;
    }

.Polaris-TextField:focus-within .Polaris-TextField__Loading:has(+ .Polaris-TextField__ClearButton){
      margin-right:0;
    }

.Polaris-TextField:not(:focus-within) .Polaris-TextField__ClearButton{
      visibility:hidden;
      opacity:0;
      position:absolute;
      right:0;
    }

.Polaris-TextField:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly)
    > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop{
      border-color:var(--p-color-input-border-hover);
      background-color:var(--p-color-input-bg-surface-hover);
    }

.Polaris-TextField--multiline{
  padding:0;
  flex-wrap:wrap;
}

.Polaris-TextField--multiline > .Polaris-TextField__Input{
    overflow:auto;
    padding-left:var(--p-space-300);
    padding-right:var(--p-space-300);
    resize:none;
  }

.Polaris-TextField--hasValue{
  color:var(--p-color-text);
}

.Polaris-TextField--focus > .Polaris-TextField__Input,
.Polaris-TextField--focus > .Polaris-TextField__VerticalContent,
.Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper,
.Polaris-TextField:focus-within > .Polaris-TextField__Input,
.Polaris-TextField__Input:focus-visible{
  outline:none;
}

.Polaris-TextField--focus > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop, .Polaris-TextField--focus > .Polaris-TextField__VerticalContent ~ .Polaris-TextField__Backdrop, .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop, .Polaris-TextField:focus-within > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop, .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{
    border-color:var(--p-color-input-border-active);
    border-width:var(--p-border-width-025);
    background-color:var(--p-color-input-bg-surface-active);
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-025);
  }

.Polaris-TextField--focus > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField--focus > .Polaris-TextField__VerticalContent ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField:focus-within > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop::after{
    content:none;
  }

.Polaris-TextField--error .Polaris-TextField__Input:hover ~ .Polaris-TextField__Backdrop,
  .Polaris-TextField--error .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{
    border-color:var(--p-color-border-critical-secondary);
    background-color:var(--p-color-bg-surface-critical);
  }

.Polaris-TextField--error .Polaris-TextField__Input:active ~ .Polaris-TextField__Backdrop,
  .Polaris-TextField--error .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{
    border-width:var(--p-border-width-025);
  }

.Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop,
  .Polaris-TextField--error > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop{
    background-color:var(--p-color-bg-surface-critical);
    border-color:var(--p-color-border-critical-secondary);
  }

.Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .Polaris-TextField--error > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop::after{
      border-color:var(--p-color-border-focus);
    }

.Polaris-TextField--readOnly.Polaris-TextField--readOnly > .Polaris-TextField__Input{
    color:var(--p-color-text-secondary);
  }

.Polaris-TextField--readOnly.Polaris-TextField--readOnly > .Polaris-TextField__Backdrop{
    background-color:var(--p-color-bg-surface-disabled);
    border-color:transparent;
  }

.Polaris-TextField--readOnly.Polaris-TextField--readOnly.Polaris-TextField--focus > .Polaris-TextField__Backdrop{
      background-color:var(--p-color-bg-surface-disabled);
      border-color:transparent;
    }

.Polaris-TextField--toneMagic .Polaris-TextField__Prefix,
  .Polaris-TextField--toneMagic .Polaris-TextField__Suffix{
    color:var(--p-color-text-magic-secondary);
  }

.Polaris-TextField--toneMagic > .Polaris-TextField__Input{
    color:var(--p-color-text-magic);
  }

.Polaris-TextField--toneMagic > .Polaris-TextField__Backdrop{
    background-color:var(--p-color-bg-surface-magic);
    border-color:var(--p-color-border-magic-secondary);
  }

.Polaris-TextField--toneMagic svg{
    fill:var(--p-color-icon-magic);
  }

.Polaris-TextField--toneMagic:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly)
    > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop{
      background-color:var(--p-color-bg-surface-magic-hover);
      border-color:var(--p-color-border-magic-secondary-hover);
    }

.Polaris-TextField--toneMagic.Polaris-TextField--focus > .Polaris-TextField__Input,
  .Polaris-TextField--toneMagic.Polaris-TextField--focus > .Polaris-TextField__VerticalContent,
  .Polaris-TextField--toneMagic.Polaris-TextField:focus-within > .Polaris-TextField__Input,
  .Polaris-TextField--toneMagic.Polaris-TextField__Input:focus-visible{
    color:var(--p-color-text);
  }

.Polaris-TextField--toneMagic.Polaris-TextField--focus .Polaris-TextField__Prefix,
    .Polaris-TextField--toneMagic.Polaris-TextField--focus .Polaris-TextField__Suffix{
      color:var(--p-color-text-secondary);
    }

.Polaris-TextField--toneMagic.Polaris-TextField--focus svg{
      fill:var(--p-color-icon-secondary);
    }

.Polaris-TextField--disabled{
  color:var(--p-color-text-disabled);
  cursor:initial;
}

.Polaris-TextField--disabled > .Polaris-TextField__Backdrop{
    border:none;
    background-color:var(--p-color-bg-surface-disabled);
  }

.Polaris-TextField--disabled svg{
    fill:var(--p-color-icon-disabled);
  }

.Polaris-TextField__InputAndSuffixWrapper{
  display:flex;
  align-items:center;
  flex:1 1;
  width:100%;
}

.Polaris-TextField__AutoSizeWrapper{
  position:relative;
  display:inline-grid;
  align-items:center;
}

.Polaris-TextField__AutoSizeWrapper::after{
    content:attr(data-auto-size-value);
    visibility:hidden;
    white-space:pre-wrap;
    max-height:var(--pg-control-height);
  }

.Polaris-TextField__AutoSizeWrapper::after,
  .Polaris-TextField__AutoSizeWrapper input,
  .Polaris-TextField__AutoSizeWrapper textarea{
    width:auto;
    min-width:1em;
    grid-area:1 / 2;
    padding:0 var(--p-space-300);
    font-size:var(--p-font-size-400);
    font-weight:var(--p-font-weight-regular);
    line-height:var(--p-font-line-height-600);
  }

@media (min-width: 48em){

.Polaris-TextField__AutoSizeWrapper::after,
  .Polaris-TextField__AutoSizeWrapper input,
  .Polaris-TextField__AutoSizeWrapper textarea{
      font-size:var(--p-font-size-325);
      line-height:var(--p-font-line-height-500);
  }
    }

.Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper .Polaris-TextField__AutoSizeWrapper::after,
  .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper input,
  .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper textarea{
    padding-left:0;
  }

.Polaris-TextField__AutoSizeWrapperWithSuffix::after,
  .Polaris-TextField__AutoSizeWrapperWithSuffix input,
  .Polaris-TextField__AutoSizeWrapperWithSuffix textarea{
    padding-right:0;
  }

.Polaris-TextField__Input{
  font-size:var(--p-font-size-400);
  font-weight:var(--p-font-weight-regular);
  line-height:var(--p-font-line-height-600);
  letter-spacing:initial;
  position:relative;
  z-index:var(--pc-text-field-contents);
  display:flex;
  flex:1 1;
  width:100%;
  min-width:0;
  min-height:var(--pg-control-height);
  padding:var(--p-space-150) var(--p-space-300);
  background:none;
  border:none;
  font-family:var(--p-font-family-sans);
  -webkit-appearance:none;
          appearance:none;
  caret-color:var(--p-color-text);
  color:var(--p-color-text);
  align-items:center;
}

@media (min-width: 48em){

.Polaris-TextField__Input{
    font-size:var(--p-font-size-325);
    line-height:var(--p-font-line-height-500);
}
  }

.Polaris-TextField__Prefix + .Polaris-TextField__Input{
    padding-left:0;
  }

.Polaris-TextField__Input:disabled{
    opacity:1;
    background:none;
    color:var(--p-color-text-disabled);
    -webkit-text-fill-color:var(--p-color-text-disabled);
  }

.Polaris-TextField__Input:invalid{
    box-shadow:none;
  }

.Polaris-TextField__Input::placeholder{
    color:var(--p-color-text-secondary);
  }

.Polaris-TextField__Input[type='number']{
    -webkit-appearance:textfield;
            appearance:textfield;
  }

.Polaris-TextField__Input[type='number']::-webkit-outer-spin-button,
    .Polaris-TextField__Input[type='number']::-webkit-inner-spin-button{
      -webkit-appearance:none;
              appearance:none;
      margin:0;
    }

.Polaris-TextField__Input:-webkit-autofill{
    border-radius:var(--p-border-radius-100);
  }

.Polaris-TextField__Input.Polaris-TextField--suggestion::selection{
      color:var(--p-color-text-disabled);
      background:transparent;
    }

.Polaris-TextField--borderless .Polaris-TextField__Input,
  .Polaris-TextField--borderless .Polaris-TextField__Backdrop{
    border:none;
    min-height:var(--p-space-800);
  }

.Polaris-TextField--slim .Polaris-TextField__Input,
  .Polaris-TextField--slim .Polaris-TextField__Backdrop{
    min-height:1.75rem;
    padding-block:var(--p-space-050);
  }

.Polaris-TextField--slim.Polaris-TextField--borderless.Polaris-TextField--slim.Polaris-TextField--borderless .Polaris-TextField__Input,
  .Polaris-TextField--slim.Polaris-TextField--borderless.Polaris-TextField--slim.Polaris-TextField--borderless .Polaris-TextField__Backdrop{
    outline-offset:0;
  }

.Polaris-TextField__Input--hasClearButton[type='search']::-webkit-search-cancel-button{
      -webkit-appearance:none;
              appearance:none;
    }

.Polaris-TextField__Input--suffixed{
  padding-right:0;
}

.Polaris-TextField__Input--alignRight{
  text-align:right;
}

.Polaris-TextField__Input--alignLeft{
  text-align:left;
}

.Polaris-TextField__Input--alignCenter{
  text-align:center;
}

.Polaris-TextField__Input--autoSize{
  flex:initial;
  width:auto;
}

.Polaris-TextField__Backdrop{
  position: relative;
  position:absolute;
  z-index:var(--pc-text-field-backdrop);
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:var(--p-color-input-bg-surface);
  border:var(--p-border-width-0165) solid var(--p-color-input-border);
  border-top-color:#898f94;
  border-radius:var(--p-border-radius-200);
  pointer-events:none;
}

.Polaris-TextField__Backdrop::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.125rem;
  right: -0.125rem;
  bottom: -0.125rem;
  left: -0.125rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-TextField__Prefix,
.Polaris-TextField__Suffix{
  position:relative;
  z-index:var(--pc-text-field-contents);
  flex:0 0 auto;
  color:var(--p-color-text-secondary);
  -webkit-user-select:none;
          user-select:none;
}

.Polaris-TextField__Prefix{
  margin-left:var(--p-space-300);
  margin-right:var(--p-space-150);
}

.Polaris-TextField__PrefixIcon{
  margin-left:var(--p-space-200);
  margin-right:var(--p-space-100);
}

.Polaris-TextField__Suffix{
  margin-left:var(--p-space-100);
  margin-right:var(--p-space-300);
}

.Polaris-TextField__VerticalContent{
  position:relative;
  z-index:var(--pc-text-field-contents);
  color:var(--p-color-text-secondary);
  padding:var(--p-space-200) var(--p-space-200) 0 var(--p-space-200);
  max-height:8.75rem;
  overflow:auto;
  border:var(--p-border-width-025) solid transparent;
  width:100%;
}

.Polaris-TextField__VerticalContent > .Polaris-TextField__Input{
    padding-left:0;
    padding-right:0;
  }

@media (min-width: 30.625em){

.Polaris-TextField__VerticalContent{
    max-height:20.5rem;
}
  }

.Polaris-TextField__Loading{
  z-index:var(--pc-text-field-contents);
  margin-right:var(--p-space-300);
}

.Polaris-TextField__Loading svg{
    display:block;
  }

.Polaris-TextField__CharacterCount{
  color:var(--p-color-text-secondary);
  z-index:var(--pc-text-field-contents);
  margin:0 var(--p-space-300) 0 var(--p-space-100);
  pointer-events:none;
  text-align:right;
}

.Polaris-TextField__AlignFieldBottom{
  align-self:flex-end;
  width:100%;
  padding-bottom:var(--p-space-200);
}

.Polaris-TextField__ClearButton{
  position: relative;
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  z-index:var(--pc-text-field-contents);
  margin:0 var(--p-space-300) 0 var(--p-space-100);
  transition:visibility var(--p-motion-duration-100) var(--p-motion-ease-out), opacity var(--p-motion-duration-100) var(--p-motion-ease-out);
}

.Polaris-TextField__ClearButton::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-TextField__ClearButton:focus{
    outline:none;
  }

.Polaris-TextField__ClearButton:focus-visible:enabled::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-TextField__ClearButton:disabled{
    cursor:default;
  }

.Polaris-TextField__Spinner{
  z-index:var(--pc-text-field-contents);
  margin:var(--p-space-100);
  color:var(--p-color-icon);
  display:flex;
  visibility:hidden;
  align-self:stretch;
  flex-direction:column;
  width:1.375rem;
  cursor:pointer;

  justify-content:center;
}

.Polaris-TextField--focus .Polaris-TextField__Spinner,
  .Polaris-TextField:hover .Polaris-TextField__Spinner{
    visibility:visible;
  }

.Polaris-TextField__SpinnerIcon{
  position:absolute;
  -webkit-user-select:none;
          user-select:none;
}

.Polaris-TextField__SpinnerIcon svg{
    fill:var(--p-color-icon);
  }

.Polaris-TextField__Resizer{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:0;
  visibility:hidden;
  overflow:hidden;
}

.Polaris-TextField__DummyInput{
  font-size:var(--p-font-size-325);
  font-weight:var(--p-font-weight-regular);
  line-height:var(--p-font-line-height-500);
  border:none;
  letter-spacing:initial;
  padding:var(--pg-control-vertical-padding) var(--p-space-300);
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:break-word;
  white-space:pre-wrap;
}

.Polaris-TextField__Segment{
  background:var(--p-color-bg-fill-tertiary);
  border-radius:var(--p-border-radius-100);
  display:flex;
  flex:1 1;
  justify-content:center;
  align-items:center;
  -webkit-appearance:none;
          appearance:none;
  border:none;
}

.Polaris-TextField__Segment:hover{
    background:var(--p-color-bg-fill-tertiary-hover);
  }

.Polaris-TextField__Segment:focus{
    outline:none;
  }

.Polaris-TextField__Segment:active{
    background:var(--p-color-bg-fill-tertiary-active);
  }

.Polaris-TextField__Segment:first-child{
    margin-bottom:0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }

.Polaris-TextField__Segment:last-child{
    border-top-left-radius:0;
    border-top-right-radius:0;
  }

.Polaris-TextField__Segment:not(:first-child){
    margin-top:0;
  }

.Polaris-TextField--monospaced{
  font-family:var(--p-font-family-mono);
}


.Polaris-Scrollable{
  --pc-scrollable-shadow-size:var(--p-space-500);
  --pc-scrollable-shadow-color:rgba(0, 0, 0, 0.15);
  --pc-scrollable-shadow-bottom:0 var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-color);
  --pc-scrollable-shadow-top:0 calc(var(--pc-scrollable-shadow-size)*-1) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-color);
  --pc-scrollable-max-height:none;
  -webkit-overflow-scrolling:touch;
  position:relative;
  max-height:var(--pc-scrollable-max-height);
  overflow-x:hidden;
  overflow-y:hidden;
  isolation:isolate;
}

.Polaris-Scrollable:focus{
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-050);
  }

.Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before,
    .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::before,
    .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::after,
    .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{
      content:'';
      position:sticky;

      left:0;
      display:block;
      pointer-events:none;
      height:var(--p-space-0);
      width:100%;
      z-index:32;
    }

.Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before, .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::before{
      top:0;
    }

.Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::after, .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{
      bottom:0;
    }

.Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before{
    box-shadow:var(--pc-scrollable-shadow-top);
  }

.Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{
    box-shadow:var(--pc-scrollable-shadow-bottom);
  }

.Polaris-Scrollable--horizontal{
  overflow-x:auto;
}

.Polaris-Scrollable--vertical{
  overflow-y:auto;
}

.Polaris-Scrollable--scrollbarWidthThin{
  scrollbar-width:thin;
}

.Polaris-Scrollable--scrollbarWidthNone{
  scrollbar-width:none;
}

.Polaris-Scrollable--scrollbarWidthAuto{
  scrollbar-width:auto;
}

.Polaris-Scrollable--scrollbarGutterStable{
  scrollbar-gutter:stable;
}

.Polaris-Scrollable__scrollbarGutterStableboth--edges{
  scrollbar-gutter:stable both-edges;
}


.Polaris-Badge{
  --pc-badge-horizontal-padding:var(--p-space-200);
  --pc-badge-vertical-padding:var(--p-space-050);
  display:inline-flex;
  align-items:center;
  padding:var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);
  background-color:var(--p-color-bg-fill-transparent-secondary);
  border-radius:var(--p-border-radius-200);
  color:var(--p-color-text-secondary);
  font-weight:var(--p-font-weight-medium);
}

.Polaris-Badge svg{
    fill:var(--p-color-text-secondary);
  }

@media print{

.Polaris-Badge{
    border:solid var(--p-border-width-025) var(--p-color-border);
}
  }

.Polaris-Badge--toneSuccess{
  background-color:var(--p-color-bg-fill-success-secondary);
  color:var(--p-color-text-success);
}

.Polaris-Badge--toneSuccess svg{
    fill:var(--p-color-icon-success);
  }

.Polaris-Badge__toneSuccess--strong{
  color:var(--p-color-text-success-on-bg-fill);
  background-color:var(--p-color-bg-fill-success);
}

.Polaris-Badge__toneSuccess--strong svg{
    fill:var(--p-color-text-success-on-bg-fill);
  }

.Polaris-Badge--toneInfo{
  background-color:var(--p-color-bg-fill-info-secondary);
  color:var(--p-color-text-info);
}

.Polaris-Badge--toneInfo svg{
    fill:var(--p-color-icon-info);
  }

.Polaris-Badge__toneInfo--strong{
  color:var(--p-color-text-info-on-bg-fill);
  background-color:var(--p-color-bg-fill-info);
}

.Polaris-Badge__toneInfo--strong svg{
    fill:var(--p-color-text-info-on-bg-fill);
  }

.Polaris-Badge--toneAttention{
  background-color:var(--p-color-bg-fill-caution-secondary);
  color:var(--p-color-text-caution);
}

.Polaris-Badge--toneAttention svg{
    fill:var(--p-color-icon-caution);
  }

.Polaris-Badge__toneAttention--strong{
  color:var(--p-color-text-caution-on-bg-fill);
  background-color:var(--p-color-bg-fill-caution);
}

.Polaris-Badge__toneAttention--strong svg{
    fill:var(--p-color-text-caution-on-bg-fill);
  }

.Polaris-Badge--toneWarning{
  background-color:var(--p-color-bg-fill-warning-secondary);
  color:var(--p-color-text-warning);
}

.Polaris-Badge--toneWarning svg{
    fill:var(--p-color-icon-warning);
  }

.Polaris-Badge__toneWarning--strong{
  color:var(--p-color-text-warning-on-bg-fill);
  background-color:var(--p-color-bg-fill-warning);
}

.Polaris-Badge__toneWarning--strong svg{
    fill:var(--p-color-text-warning-on-bg-fill);
  }

.Polaris-Badge--toneCritical{
  background-color:var(--p-color-bg-fill-critical-secondary);
  color:var(--p-color-text-critical);
}

.Polaris-Badge--toneCritical svg{
    fill:var(--p-color-icon-critical);
  }

.Polaris-Badge__toneCritical--strong{
  color:var(--p-color-text-critical-on-bg-fill);
  background-color:var(--p-color-bg-fill-critical);
}

.Polaris-Badge__toneCritical--strong svg{
    fill:var(--p-color-text-critical-on-bg-fill);
  }

.Polaris-Badge--toneNew{
  border:none;
  background-color:var(--p-color-bg-fill-transparent-secondary);
  color:var(--p-color-text-secondary);
  font-weight:var(--p-font-weight-bold);
  border-radius:var(--p-border-radius-200);
}

.Polaris-Badge--toneNew svg{
    fill:var(--p-color-text-secondary);
  }

.Polaris-Badge--toneMagic{
  background-color:var(--p-color-bg-fill-magic-secondary);
  color:var(--p-color-text-magic);
}

.Polaris-Badge--toneMagic svg{
    fill:var(--p-color-text-magic);
  }

.Polaris-Badge__toneRead--only{
  color:var(--p-color-text-secondary);
  background-color:transparent;
}

.Polaris-Badge__toneRead--only svg{
    fill:var(--p-color-icon-secondary);
  }

.Polaris-Badge--toneEnabled{
  color:var(--p-color-text);
}

.Polaris-Badge--toneEnabled svg{
    fill:var(--p-color-icon-success);
  }

.Polaris-Badge--sizeLarge{
  padding:var(--p-space-100) var(--p-space-200);
}

.Polaris-Badge--withinFilter{
  border-radius:var(--p-border-radius-100);
}

.Polaris-Badge__Icon{
  margin:calc(var(--p-space-050)*-1) 0 calc(var(--p-space-050)*-1) calc(var(--p-space-200)*-1);
}

.Polaris-Badge__Icon svg{
    display:inline-block;
    vertical-align:top;
  }

.Polaris-Badge--sizeLarge .Polaris-Badge__Icon{
    margin:0 var(--p-space-100) 0 calc(var(--p-space-050)*-1);
  }

.Polaris-Badge__Icon + *{
    margin-left:0;
  }

.Polaris-Badge__PipContainer{
  display:grid;
  align-items:center;
  margin-left:calc(var(--p-space-050)*-1);
  margin-right:var(--p-space-100);
}


.Polaris-Badge-Pip{
  --pc-pip-size:var(--p-space-200);
  --pc-pip-color:var(--p-color-text-secondary);
  --pc-border-width:0.07813rem;
  display:inline-block;
  color:var(--pc-pip-color);
  height:var(--pc-pip-size);
  width:var(--pc-pip-size);
  border:var(--p-border-width-050) solid var(--pc-pip-color);
  flex-shrink:0;
  border-radius:0.1875rem;
  border-width:var(--pc-border-width);
}

.Polaris-Badge-Pip--toneInfo{
  --pc-pip-color:var(--p-color-icon-info);
}

.Polaris-Badge-Pip--toneSuccess{
  --pc-pip-color:var(--p-color-icon-success);
}

.Polaris-Badge-Pip--toneNew{
  --pc-pip-color:var(--p-color-text-secondary);
}

.Polaris-Badge-Pip--toneAttention{
  --pc-pip-color:var(--p-color-icon-caution);
}

.Polaris-Badge-Pip--toneWarning{
  --pc-pip-color:var(--p-color-icon-warning);
}

.Polaris-Badge-Pip--toneCritical{
  --pc-pip-color:var(--p-color-icon-critical);
}

.Polaris-Badge-Pip--progressIncomplete{
  background:transparent;
}

.Polaris-Badge-Pip--progressPartiallyComplete{
  background:linear-gradient(
    to top,
    currentColor,
    currentColor 50%,
    transparent 50%,
    transparent
  );
}

.Polaris-Badge-Pip--progressPartiallyComplete.Polaris-Badge-Pip{
    background:none;
    position:relative;
    overflow:hidden;
  }

.Polaris-Badge-Pip--progressPartiallyComplete.Polaris-Badge-Pip::after{
      content:'';
      position:absolute;
      top:calc(var(--pc-border-width)*-1);
      left:calc(var(--pc-border-width)*-1);
      width:0.25rem;
      height:0.5rem;
      margin:0 0.1275rem;
      border-right:var(--pc-border-width) solid currentColor;
      border-left:var(--pc-border-width) solid currentColor;
      font-size:0;
      transform:rotate(-45deg);
    }

@media print{

.Polaris-Badge-Pip--progressPartiallyComplete{
    background:none;
    box-shadow:0 -6.375rem 0 -6.25rem currentColor inset;
}
  }

.Polaris-Badge-Pip--progressComplete{
  background:currentColor;
}

@media print{

.Polaris-Badge-Pip--progressComplete{
    background:none;
    box-shadow:0 0 0 6.25rem currentColor inset;
}
  }


.Polaris-ActionList__Item{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  position: relative;
  --pc-action-list-item-min-height:var(--p-space-800);
  --pc-action-list-indented-item-margin:calc(var(--p-space-500) + var(--p-space-050));
  --pc-action-list-indented-item-width:calc(100% - var(--pc-action-list-indented-item-margin));
  --pc-action-list-item-vertical-padding:calc((var(--pc-action-list-item-min-height) - var(--p-font-line-height-500))/2);
  display:flex;
  align-items:center;
  width:100%;
  min-height:var(--pc-action-list-item-min-height);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  padding:var(--p-space-100) var(--p-space-150);
  border-radius:var(--p-border-radius-200);
  border-top:var(--p-border-width-025) solid transparent;
  color:inherit;
}

.Polaris-ActionList__Item:focus{
    outline:none;
  }

.Polaris-ActionList__Item::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-200);
}

.Polaris-ActionList__Item.Polaris-ActionList--default{
    --pc-action-list-image-size:1.25rem;
  }

@media (forced-colors: active){

.Polaris-ActionList__Item{
    border:var(--p-border-width-025) solid transparent;
}
  }

.Polaris-ActionList__Item:hover{
    background-color:var(--p-color-bg-surface-secondary-hover);
    text-decoration:none;
    outline:var(--p-border-width-050) solid transparent;
  }

.Polaris-ActionList__Item:active{
    background-color:var(--p-color-bg-surface-secondary-active);
  }

.Polaris-ActionList__Item:active svg{
      fill:var(--p-color-icon);
    }

.Polaris-ActionList__Item:focus-visible:not(:active){
    background-color:var(--p-color-bg-surface);
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
  }

.Polaris-ActionList__Item:focus-visible:not(:active)::after{
    content:none;
  }

.Polaris-ActionList__Item:visited{
    color:inherit;
  }

.Polaris-ActionList__Item.Polaris-ActionList--active{
    background-color:var(--p-color-bg-surface-secondary-selected);
    font-weight:var(--p-font-weight-semibold);
  }

.Polaris-ActionList__Item.Polaris-ActionList--active svg{
      fill:var(--p-color-icon-active);
    }

.Polaris-ActionList__Item.Polaris-ActionList--active::before{
      content:'';
      background-color:var(--p-color-bg-fill-brand);
      position:absolute;
      top:0;
      left:calc(var(--p-space-200)*-1);
      height:100%;
      display:block;
      width:var(--p-border-width-050);
      border-top-right-radius:var(--p-border-radius-100);
      border-bottom-right-radius:var(--p-border-radius-100);
      display:none;
    }

.Polaris-ActionList__Item.Polaris-ActionList--destructive{
    color:var(--p-color-text-critical);
  }

.Polaris-ActionList__Item.Polaris-ActionList--destructive svg{
      fill:var(--p-color-text-critical);
    }

.Polaris-ActionList__Item.Polaris-ActionList--destructive:hover{
      background-color:var(--p-color-bg-surface-critical-hover);
    }

.Polaris-ActionList__Item.Polaris-ActionList--destructive:active,
    .Polaris-ActionList__Item.Polaris-ActionList--destructive.Polaris-ActionList--active{
      background-color:var(--p-color-bg-surface-critical-active);
    }

.Polaris-ActionList__Item.Polaris-ActionList--disabled{
    background-image:none;
    color:var(--p-color-text-disabled);
    cursor:default;
  }

.Polaris-ActionList__Item.Polaris-ActionList--disabled:hover{
      background-color:unset;
    }

.Polaris-ActionList__Item.Polaris-ActionList--disabled .Polaris-ActionList__Prefix svg,
    .Polaris-ActionList__Item.Polaris-ActionList--disabled .Polaris-ActionList__Suffix svg{
      fill:var(--p-color-icon-disabled);
    }

.Polaris-ActionList__Item.Polaris-ActionList--indented{
    --pc-action-list-image-size:1.5rem;
    position:relative;
    margin-left:var(--pc-action-list-indented-item-margin);
    max-width:var(--pc-action-list-indented-item-width);
  }

.Polaris-ActionList__Item.Polaris-ActionList--indented::before{
      content:'';
      position:absolute;
      top:calc(var(--p-space-300)*-1);
      bottom:0;
      left:0;
      border-left:var(--p-border-width-025) solid var(--p-color-border);
      margin-left:calc(var(--p-space-150)*-1);
    }

.Polaris-ActionList__Item.Polaris-ActionList--menu{
    --pc-action-list-image-size:1.5rem;
  }

.Polaris-ActionList__Prefix{
  display:flex;
  flex:0 0 auto;
  justify-content:center;
  align-items:center;
  height:var(--pc-action-list-image-size);
  width:var(--pc-action-list-image-size);
  border-radius:var(--p-border-radius-100);
  margin:calc(var(--pc-action-list-image-size)*-0.5) 0 calc(var(--pc-action-list-image-size)*-0.5) 0;
  background-size:cover;
  background-position:center center;
}

.Polaris-ActionList__Prefix svg{
    fill:var(--p-color-icon);
  }

.Polaris-ActionList__Suffix svg{
  fill:var(--p-color-icon);
}

.Polaris-ActionList__Text{
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
}


.Polaris-ThemeProvider--themeContainer{
  color:var(--p-color-text);
}


.Polaris-PositionedOverlay{
  position:absolute;
  z-index:var(--p-z-index-2);
}

.Polaris-PositionedOverlay--fixed{
  position:fixed;
}

.Polaris-PositionedOverlay--calculating{
  visibility:hidden;
}

.Polaris-PositionedOverlay--preventInteraction{
  pointer-events:none;
}


.Polaris-Tooltip-TooltipOverlay{
  --pc-tooltip-chevron-x-pos: initial;
  --pc-tooltip-border-radius: initial;
  --pc-tooltip-padding: initial;
  --pc-tooltip-overlay-offset:var(--p-space-300);
  --pc-tooltip-shadow-bevel-z-index:1;
  --pc-tooltip-tail-z-index:calc(var(--pc-tooltip-shadow-bevel-z-index) + 1);
  position:relative;
  margin:var(--pc-tooltip-overlay-offset) var(--p-space-100) var(--p-space-100);
  opacity:1;
  box-shadow:var(--p-shadow-400);
  border-radius:var(--pc-tooltip-border-radius);
  pointer-events:none;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:opacity, left, top, transform;
  transform:none;
  transition:none;
  min-width:4ch;

  position: relative;

  box-shadow: var(--p-shadow-300);

  border-radius: var(--pc-tooltip-border-radius);
}

.Polaris-Tooltip-TooltipOverlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--pc-tooltip-shadow-bevel-z-index);
  box-shadow: var(--p-shadow-bevel-100);
  border-radius: var(--pc-tooltip-border-radius);
  pointer-events: none;
  mix-blend-mode: luminosity;
}

@media screen and (-ms-high-contrast: active){

.Polaris-Tooltip-TooltipOverlay{
    border:var(--p-border-width-050) solid windowText;
}
  }

.Polaris-Tooltip-TooltipOverlay .Polaris-Tooltip-TooltipOverlay__Tail{
    position:absolute;
    top:calc(var(--p-space-200)*-1 + 0.05rem);
    left:calc(var(--pc-tooltip-chevron-x-pos) - var(--p-space-150) - var(--p-space-400));
    z-index:var(--pc-tooltip-tail-z-index);
  }

.Polaris-Tooltip-TooltipOverlay.Polaris-Tooltip-TooltipOverlay--positionedAbove::after{
      top:auto;
      bottom:calc(var(--p-space-400)*-1);
      border-color:var(--p-color-bg-surface) transparent transparent transparent;
    }

.Polaris-Tooltip-TooltipOverlay.Polaris-Tooltip-TooltipOverlay--positionedAbove .Polaris-Tooltip-TooltipOverlay__Tail{
      top:unset;
      bottom:calc(var(--p-space-200)*-1);
      filter:drop-shadow(0 0.1875rem 0.125rem rgba(26, 26, 26, 0.1));
    }

.Polaris-Tooltip-TooltipOverlay--measuring{
  opacity:0;
}

.Polaris-Tooltip-TooltipOverlay--measured:not(.Polaris-Tooltip-TooltipOverlay--instant){
  animation:var(--p-motion-keyframes-appear-below) var(--p-motion-duration-50) var(--p-motion-ease-out) var(--p-motion-duration-100) 1 both;
}

@media (prefers-reduced-motion){

.Polaris-Tooltip-TooltipOverlay--measured:not(.Polaris-Tooltip-TooltipOverlay--instant){
    animation:none;
}
  }

.Polaris-Tooltip-TooltipOverlay--measured.Polaris-Tooltip-TooltipOverlay--positionedAbove:not(.Polaris-Tooltip-TooltipOverlay--instant){
  animation:var(--p-motion-keyframes-appear-above) var(--p-motion-duration-50) var(--p-motion-ease-out) var(--p-motion-duration-100) 1 both;
}

@media (prefers-reduced-motion){

.Polaris-Tooltip-TooltipOverlay--measured.Polaris-Tooltip-TooltipOverlay--positionedAbove:not(.Polaris-Tooltip-TooltipOverlay--instant){
    animation:none;
}
  }

.Polaris-Tooltip-TooltipOverlay--positionedAbove{
  margin:var(--p-space-100) var(--p-space-100) var(--pc-tooltip-overlay-offset);
}

.Polaris-Tooltip-TooltipOverlay__Content{
  position:relative;
  background-color:var(--p-color-bg-surface);
  color:var(--p-color-text);
  word-break:break-word;
  border-radius:var(--pc-tooltip-border-radius);
  padding:var(--pc-tooltip-padding);
}

.Polaris-Tooltip-TooltipOverlay--default{
  max-width:12.5rem;
}

.Polaris-Tooltip-TooltipOverlay--wide{
  max-width:17.1875rem;
}

[data-polaris-tooltip-activator]{
  outline:0;
  position: relative;
}

[data-polaris-tooltip-activator]::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

[data-polaris-tooltip-activator]:focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}


.Polaris-Tooltip__TooltipContainer{
  display:flex;
}

.Polaris-Tooltip__HasUnderline{
  border-bottom:var(--p-border-width-050) dotted var(--p-color-border);
}


.Polaris-Popover{
  --pc-popover-visible-portion-of-arrow:0.3125rem;
  --pc-popover-vertical-motion-offset:-0.3125rem;
  max-width:calc(100vw - var(--p-space-800));
  margin:var(--pc-popover-visible-portion-of-arrow) var(--p-space-200) var(--p-space-400);
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:left, top;
  position: relative;
  box-shadow: var(--p-shadow-300);
  border-radius: var(--p-border-radius-300);
}

.Polaris-Popover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  box-shadow: var(--p-shadow-bevel-100);
  border-radius: var(--p-border-radius-300);
  pointer-events: none;
  mix-blend-mode: luminosity;
}

.Polaris-Popover__PopoverOverlay{
  opacity:0;
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease), transform var(--p-motion-duration-100) var(--p-motion-ease);
  transform:translateY(var(--pc-popover-vertical-motion-offset));
}

.Polaris-Popover__PopoverOverlay--noAnimation{
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease);
}

.Polaris-Popover__PopoverOverlay--entering{
  opacity:1;
  transform:translateY(0);
}

.Polaris-Popover__PopoverOverlay--open{
  opacity:1;
  transform:none;
}

.Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){
  opacity:0;
  transform:translateY(var(--pc-popover-vertical-motion-offset));
}

.Polaris-Popover--fullWidth{
  margin:var(--pc-popover-visible-portion-of-arrow) auto 0 auto;
}

.Polaris-Popover--fullWidth .Polaris-Popover__Content{
    max-width:none;
  }

.Polaris-Popover--positionedAbove{
  margin:var(--p-space-400) var(--p-space-200) var(--pc-popover-visible-portion-of-arrow);
}

.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{
    margin:0 auto var(--pc-popover-visible-portion-of-arrow) auto;
  }

.Polaris-Popover--positionedCover{
  margin:0;
}

.Polaris-Popover--positionedCover::before{
    border-radius:var(--p-border-radius-200);
  }

.Polaris-Popover--positionedCover .Polaris-Popover__ContentContainer{
    border-radius:var(--p-border-radius-200);
  }

.Polaris-Popover__ContentContainer{
  position:relative;
  overflow:hidden;
  background:var(--p-color-bg-surface);
  border-radius:var(--p-space-300);
  isolation:isolate;
}

.Polaris-Popover__Content{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--p-border-radius-100);
  max-width:25rem;
  max-height:31.25rem;
}

.Polaris-Popover__Content:focus{
    outline:none;
  }

.Polaris-Popover__Content--fullHeight{
  max-height:100vh;
}

.Polaris-Popover__Content--fluidContent{
  max-height:none;
  max-width:none;
}

.Polaris-Popover__Pane{
  flex:1 1 auto;
  max-width:100%;
}

.Polaris-Popover__Pane:focus{
    outline:none;
  }

.Polaris-Popover__Pane--fixed{
  overflow:visible;
  flex:0 0 auto;
}

.Polaris-Popover__Pane--subdued{
  background-color:var(--p-color-bg-surface-secondary);
}

.Polaris-Popover__Pane--captureOverscroll{
  overscroll-behavior:contain;
}

.Polaris-Popover__Section + .Polaris-Popover__Section{
    border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
  }

.Polaris-Popover__FocusTracker{
  position: absolute !important;
  top: 0;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

@media print{

.Polaris-Popover__PopoverOverlay--hideOnPrint{
    display:none !important;
}
  }


.Polaris-ActionMenu-SecondaryAction{
  --pc-secondary-action-button-spacing:var(--p-space-300);
}
.Polaris-ActionMenu-SecondaryAction a,
  .Polaris-ActionMenu-SecondaryAction button{
    position: relative;
    --pc-button-padding-block:var(--p-space-100);
    --pc-button-padding-inline:var(--p-space-300);
    background:var(--p-color-bg-fill-tertiary) !important;
    box-shadow:none !important;
    border:none;
    border-radius:var(--p-border-radius-200) !important;
    min-height:1.75rem;
  }
.Polaris-ActionMenu-SecondaryAction a::after, .Polaris-ActionMenu-SecondaryAction button::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.125rem;
  right: -0.125rem;
  bottom: -0.125rem;
  left: -0.125rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}
.Polaris-ActionMenu-SecondaryAction a:is(:hover, :focus), .Polaris-ActionMenu-SecondaryAction button:is(:hover, :focus){
      background-color:var(--p-color-bg-fill-tertiary-hover) !important;
    }
.Polaris-ActionMenu-SecondaryAction a:active,
    .Polaris-ActionMenu-SecondaryAction button:active,
    .Polaris-ActionMenu-SecondaryAction a[aria-expanded='true'],
    .Polaris-ActionMenu-SecondaryAction button[aria-expanded='true']{
      background-color:var(--p-color-bg-fill-tertiary-active) !important;
      box-shadow:var(--p-shadow-inset-200) !important;
    }
.Polaris-ActionMenu-SecondaryAction a:focus-visible, .Polaris-ActionMenu-SecondaryAction button:focus-visible{
      outline:var(--p-border-width-050) solid var(--p-color-border-focus);
      outline-offset:var(--p-space-050);
    }
.Polaris-ActionMenu-SecondaryAction a:focus-visible::after, .Polaris-ActionMenu-SecondaryAction button:focus-visible::after{
    content:none;
  }
.Polaris-ActionMenu-SecondaryAction a[aria-disabled='true'], .Polaris-ActionMenu-SecondaryAction button[aria-disabled='true']{
      background-color:var(--p-color-bg-fill-disabled) !important;
    }
@media (min-width: 48em){
  .Polaris-ActionMenu-SecondaryAction a,
  .Polaris-ActionMenu-SecondaryAction button{
      border:none !important;
      position: relative;
  }
      .Polaris-ActionMenu-SecondaryAction a::after, .Polaris-ActionMenu-SecondaryAction button::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -0.0625rem;
    right: -0.0625rem;
    bottom: -0.0625rem;
    left: -0.0625rem;
    display: block;
    pointer-events: none;
    box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
    border-radius: var(--p-border-radius-100);
  }
    }
.Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a,
    .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button{
      color:var(--p-color-text-critical) !important;
    }
.Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a svg, .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button svg{
        fill:var(--p-color-text-critical);
      }
.Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a:is(:hover, :focus), .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button:is(:hover, :focus){
        background-color:var(--p-color-bg-fill-tertiary-hover) !important;
      }
.Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a:active, .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button:active{
        background-color:var(--p-color-bg-fill-tertiary-active) !important;
      }


.Polaris-ActionMenu-MenuGroup__Details{
  margin-top:calc(var(--p-space-400)*-1);
  padding:var(--p-space-400);
}


.Polaris-ActionMenu-Actions__ActionsLayoutOuter{
  position:relative;
  width:100%;
}

.Polaris-ActionMenu-Actions__ActionsLayout{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  flex:1 1 auto;
  gap:var(--p-space-200);
}

.Polaris-ActionMenu-Actions__ActionsLayout > *{
    flex:0 0 auto;
  }

.Polaris-ActionMenu-Actions--actionsLayoutMeasuring{
  visibility:hidden;
  height:0;
}

.Polaris-ActionMenu-Actions__ActionsLayoutMeasurer{
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  flex:1 1 auto;
  gap:0;
  padding:0;
  visibility:hidden;
  height:0;
}

.Polaris-ActionMenu-Actions__ActionsLayoutMeasurer > *{
    flex:0 0 auto;
  }


.Polaris-ActionMenu-RollupActions__RollupActivator{
  text-align:right;
}
.Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']{
    background:var(--p-color-bg-fill-tertiary);
    border-radius:var(--p-border-radius-200);
    border:none;
    box-shadow:none;
    margin:0;
  }
.Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']:active{
      background:var(--p-color-bg-fill-tertiary-active);
    }
.Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']:focus:not(:active){
      outline:var(--p-border-width-050) solid var(--p-color-border-focus);
      outline-offset:var(--p-space-050);
      background:var(--p-color-bg-fill-tertiary-active);
    }
.Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']:focus:not(:active)::after{
    content:none;
  }
.Polaris-ActionMenu-RollupActions__RollupActivator button[type='button']:hover{
      background:var(--p-color-bg-fill-tertiary-hover);
    }


.Polaris-ActionMenu{
  width:100%;
  display:flex;
  justify-content:flex-end;
}
@media print{
  .Polaris-ActionMenu{
    display:none !important;
}
  }


.Polaris-Combobox__Listbox{
  padding:var(--p-space-200) 0;
  overflow:visible;
}


.Polaris-Listbox-Section__SectionGroup{
  list-style-type:none;
  padding:0;
  margin:0;
  border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary);
}

.Polaris-Listbox-Section--noDivider{
  border-bottom:none;
}


.Polaris-Choice{
  --pc-choice-space-0:0rem;
  --pc-choice-bleed-block-start-xs: initial;
  --pc-choice-bleed-block-start-sm: initial;
  --pc-choice-bleed-block-start-md: initial;
  --pc-choice-bleed-block-start-lg: initial;
  --pc-choice-bleed-block-start-xl: initial;
  --pc-choice-bleed-block-start: var(--pc-choice-bleed-block-start-xs);
  --pc-choice-bleed-block-end-xs: initial;
  --pc-choice-bleed-block-end-sm: initial;
  --pc-choice-bleed-block-end-md: initial;
  --pc-choice-bleed-block-end-lg: initial;
  --pc-choice-bleed-block-end-xl: initial;
  --pc-choice-bleed-block-end: var(--pc-choice-bleed-block-end-xs);
  --pc-choice-bleed-inline-start-xs: initial;
  --pc-choice-bleed-inline-start-sm: initial;
  --pc-choice-bleed-inline-start-md: initial;
  --pc-choice-bleed-inline-start-lg: initial;
  --pc-choice-bleed-inline-start-xl: initial;
  --pc-choice-bleed-inline-start: var(--pc-choice-bleed-inline-start-xs);
  --pc-choice-bleed-inline-end-xs: initial;
  --pc-choice-bleed-inline-end-sm: initial;
  --pc-choice-bleed-inline-end-md: initial;
  --pc-choice-bleed-inline-end-lg: initial;
  --pc-choice-bleed-inline-end-xl: initial;
  --pc-choice-bleed-inline-end: var(--pc-choice-bleed-inline-end-xs);
  --pc-choice-fill-xs: initial;
  --pc-choice-fill-sm: initial;
  --pc-choice-fill-md: initial;
  --pc-choice-fill-lg: initial;
  --pc-choice-fill-xl: initial;
  --pc-choice-fill: var(--pc-choice-fill-xs);
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  cursor:pointer;
  padding-block-start:calc(var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + var(--p-space-100));
  padding-block-end:calc(var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)) + var(--p-space-100));
  padding-inline-start:var(
    --pc-choice-bleed-inline-start,
    var(--pc-choice-space-0)
  );
  padding-inline-end:var(
    --pc-choice-bleed-inline-end,
    var(--pc-choice-space-0)
  );
  margin-block-start:calc(var(--pc-choice-bleed-block-start, var(--pc-choice-space-0))*-1);
  margin-block-end:calc(var(--pc-choice-bleed-block-end, var(--pc-choice-space-0))*-1);
  margin-inline-start:calc(var(--pc-choice-bleed-inline-start, var(--pc-choice-space-0))*-1);
  margin-inline-end:calc(var(--pc-choice-bleed-inline-end, var(--pc-choice-space-0))*-1);
  inline-size:calc(var(--pc-choice-fill, auto) + var(--pc-choice-bleed-inline-start, var(--pc-choice-space-0)) + var(--pc-choice-bleed-inline-end, var(--pc-choice-space-0)));
  block-size:calc(var(--pc-choice-fill, auto) + var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)));
}
@media (min-width: 30.625em) {
.Polaris-Choice{
    --pc-choice-bleed-block-start: var(
        --pc-choice-bleed-block-start-sm,
        var(--pc-choice-bleed-block-start-xs)
      );
}
}
@media (min-width: 48em) {
.Polaris-Choice{
    --pc-choice-bleed-block-start: var(
        --pc-choice-bleed-block-start-md,
        var(
          --pc-choice-bleed-block-start-sm,
          var(--pc-choice-bleed-block-start-xs)
        )
      );
}
}
@media (min-width: 65em) {
.Polaris-Choice{
    --pc-choice-bleed-block-start: var(
        --pc-choice-bleed-block-start-lg,
        var(
          --pc-choice-bleed-block-start-md,
          var(
            --pc-choice-bleed-block-start-sm,
            var(--pc-choice-bleed-block-start-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
.Polaris-Choice{
    --pc-choice-bleed-block-start: var(
        --pc-choice-bleed-block-start-xl,
        var(
          --pc-choice-bleed-block-start-lg,
          var(
            --pc-choice-bleed-block-start-md,
            var(
              --pc-choice-bleed-block-start-sm,
              var(--pc-choice-bleed-block-start-xs)
            )
          )
        )
      );
}
}
@media (min-width: 30.625em) {
.Polaris-Choice{
    --pc-choice-bleed-block-end: var(
        --pc-choice-bleed-block-end-sm,
        var(--pc-choice-bleed-block-end-xs)
      );
}
}
@media (min-width: 48em) {
.Polaris-Choice{
    --pc-choice-bleed-block-end: var(
        --pc-choice-bleed-block-end-md,
        var(
          --pc-choice-bleed-block-end-sm,
          var(--pc-choice-bleed-block-end-xs)
        )
      );
}
}
@media (min-width: 65em) {
.Polaris-Choice{
    --pc-choice-bleed-block-end: var(
        --pc-choice-bleed-block-end-lg,
        var(
          --pc-choice-bleed-block-end-md,
          var(
            --pc-choice-bleed-block-end-sm,
            var(--pc-choice-bleed-block-end-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
.Polaris-Choice{
    --pc-choice-bleed-block-end: var(
        --pc-choice-bleed-block-end-xl,
        var(
          --pc-choice-bleed-block-end-lg,
          var(
            --pc-choice-bleed-block-end-md,
            var(
              --pc-choice-bleed-block-end-sm,
              var(--pc-choice-bleed-block-end-xs)
            )
          )
        )
      );
}
}
@media (min-width: 30.625em) {
.Polaris-Choice{
    --pc-choice-bleed-inline-start: var(
        --pc-choice-bleed-inline-start-sm,
        var(--pc-choice-bleed-inline-start-xs)
      );
}
}
@media (min-width: 48em) {
.Polaris-Choice{
    --pc-choice-bleed-inline-start: var(
        --pc-choice-bleed-inline-start-md,
        var(
          --pc-choice-bleed-inline-start-sm,
          var(--pc-choice-bleed-inline-start-xs)
        )
      );
}
}
@media (min-width: 65em) {
.Polaris-Choice{
    --pc-choice-bleed-inline-start: var(
        --pc-choice-bleed-inline-start-lg,
        var(
          --pc-choice-bleed-inline-start-md,
          var(
            --pc-choice-bleed-inline-start-sm,
            var(--pc-choice-bleed-inline-start-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
.Polaris-Choice{
    --pc-choice-bleed-inline-start: var(
        --pc-choice-bleed-inline-start-xl,
        var(
          --pc-choice-bleed-inline-start-lg,
          var(
            --pc-choice-bleed-inline-start-md,
            var(
              --pc-choice-bleed-inline-start-sm,
              var(--pc-choice-bleed-inline-start-xs)
            )
          )
        )
      );
}
}
@media (min-width: 30.625em) {
.Polaris-Choice{
    --pc-choice-bleed-inline-end: var(
        --pc-choice-bleed-inline-end-sm,
        var(--pc-choice-bleed-inline-end-xs)
      );
}
}
@media (min-width: 48em) {
.Polaris-Choice{
    --pc-choice-bleed-inline-end: var(
        --pc-choice-bleed-inline-end-md,
        var(
          --pc-choice-bleed-inline-end-sm,
          var(--pc-choice-bleed-inline-end-xs)
        )
      );
}
}
@media (min-width: 65em) {
.Polaris-Choice{
    --pc-choice-bleed-inline-end: var(
        --pc-choice-bleed-inline-end-lg,
        var(
          --pc-choice-bleed-inline-end-md,
          var(
            --pc-choice-bleed-inline-end-sm,
            var(--pc-choice-bleed-inline-end-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
.Polaris-Choice{
    --pc-choice-bleed-inline-end: var(
        --pc-choice-bleed-inline-end-xl,
        var(
          --pc-choice-bleed-inline-end-lg,
          var(
            --pc-choice-bleed-inline-end-md,
            var(
              --pc-choice-bleed-inline-end-sm,
              var(--pc-choice-bleed-inline-end-xs)
            )
          )
        )
      );
}
}
@media (min-width: 30.625em) {
.Polaris-Choice{
    --pc-choice-fill: var(
        --pc-choice-fill-sm,
        var(--pc-choice-fill-xs)
      );
}
}
@media (min-width: 48em) {
.Polaris-Choice{
    --pc-choice-fill: var(
        --pc-choice-fill-md,
        var(
          --pc-choice-fill-sm,
          var(--pc-choice-fill-xs)
        )
      );
}
}
@media (min-width: 65em) {
.Polaris-Choice{
    --pc-choice-fill: var(
        --pc-choice-fill-lg,
        var(
          --pc-choice-fill-md,
          var(
            --pc-choice-fill-sm,
            var(--pc-choice-fill-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
.Polaris-Choice{
    --pc-choice-fill: var(
        --pc-choice-fill-xl,
        var(
          --pc-choice-fill-lg,
          var(
            --pc-choice-fill-md,
            var(
              --pc-choice-fill-sm,
              var(--pc-choice-fill-xs)
            )
          )
        )
      );
}
}
.Polaris-Choice--labelHidden{
  padding-block-start:var(
    --pc-choice-bleed-block-start,
    var(--pc-choice-space-0)
  );
  padding-block-end:var(--pc-choice-bleed-block-end, var(--pc-choice-space-0));
}
.Polaris-Choice--labelHidden > .Polaris-Choice__Label{
    position: absolute !important;
    top: 0;
    width: 0.0625rem !important;
    height: 0.0625rem !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
.Polaris-Choice--labelHidden .Polaris-Choice__Control{
    margin-top:0;
    margin-right:0;
  }
.Polaris-Choice--disabled{
  cursor:default;
}
.Polaris-Choice--disabled > .Polaris-Choice__Label{
    color:var(--p-color-text-disabled);
  }
.Polaris-Choice--disabled > .Polaris-Choice__Label:hover{
      cursor:default;
    }
@media (-ms-high-contrast: active){
.Polaris-Choice--disabled > .Polaris-Choice__Label{
      color:grayText;
  }
    }
.Polaris-Choice--toneMagic > .Polaris-Choice__Label{
  color:var(--p-color-text-magic);
}
.Polaris-Choice--disabled + .Polaris-Choice__Descriptions{
  color:var(--p-color-text-disabled);
}
.Polaris-Choice__Control{
  --pc-choice-size:1.125rem;
  display:flex;
  flex:0 0 auto;
  align-items:stretch;
  width:var(--pc-choice-size);
  height:var(--pc-choice-size);
  margin-right:var(--p-space-200);
}
@media (max-width: 47.9975em){
.Polaris-Choice__Control{
    --pc-choice-size:1.25rem;
}
  }
.Polaris-Choice__Control > *{
    width:100%;
  }
.Polaris-Choice__Label{
  -webkit-tap-highlight-color:transparent;
}
.Polaris-Choice__Label:hover{
    cursor:pointer;
  }
.Polaris-Choice__Descriptions{
  --pc-choice-size:1.125rem;
  padding-left:calc(var(--p-space-200) + var(--pc-choice-size));
}
@media (max-width: 47.9975em){
.Polaris-Choice__Descriptions{
    --pc-choice-size:1.25rem;
}
  }
.Polaris-Choice__HelpText{
  margin-bottom:var(--p-space-100);
}


.Polaris-Checkbox{
  position:relative;
  margin:var(--p-space-025);
}

.Polaris-Checkbox__ChoiceLabel .Polaris-Checkbox__Backdrop{
  border-width:0;
  box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-input-border);
  transition:border-color var(--p-motion-duration-100) var(--p-motion-ease-out), border-width var(--p-motion-duration-100) var(--p-motion-ease-out), box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out);
  transform:translate3d(0, 0, 0);
}

.Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Backdrop{
  border-color:var(--p-color-input-border-hover);
  box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-input-border-hover);
  background-color:var(--p-color-input-bg-surface-hover);
}

.Polaris-Checkbox__ChoiceLabel:active .Polaris-Checkbox__Backdrop,
.Polaris-Checkbox__ChoiceLabel:checked .Polaris-Checkbox__Backdrop{
  border-color:var(--p-color-bg-fill-brand);
  border-width:0;
  box-shadow:inset 0 0 0 var(--p-space-050) var(--p-color-bg-fill-brand);
}

.Polaris-Checkbox__Input{
  position:absolute;
  z-index:var(--p-z-index-1);
  width:100%;
  height:100%;
  opacity:0;
  margin:0;
}

.Polaris-Checkbox__Input:focus-visible + .Polaris-Checkbox__Backdrop{
      outline:var(--p-border-width-050) solid var(--p-color-border-focus);
      outline-offset:var(--p-space-025);
      background-color:var(--p-color-input-bg-surface-hover);
      border-width:0;
    }

.Polaris-Checkbox__Input:focus-visible + .Polaris-Checkbox__Backdrop::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop{
      border-color: var(--p-color-border-emphasis);
      border-color:var(--p-color-bg-fill-brand);
      background-color:var(--p-color-bg-fill-brand-selected);
      box-shadow:inset 0 0 0 var(--p-space-800) var(--p-color-bg-fill-brand-selected);
    }

.Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop::before, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop::before {
  opacity: 1;
  transform: scale(1);
}

@media (-ms-high-contrast: active) {

.Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop::before, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop::before {
    border: var(--p-border-width-050) solid windowText;
  }
}

.Polaris-Checkbox__Input:checked ~ .Polaris-Checkbox__Icon, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate ~ .Polaris-Checkbox__Icon{
      transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out), transform var(--p-motion-duration-150) var(--p-motion-ease-out);
      opacity:1;
    }

.Polaris-Checkbox__Input:checked ~ .Polaris-Checkbox__Icon svg, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate ~ .Polaris-Checkbox__Icon svg{
        fill:var(--p-color-text-brand-on-bg-fill);
      }

.Polaris-Checkbox__Input:checked ~ .Polaris-Checkbox__Icon.Polaris-Checkbox--animated, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate ~ .Polaris-Checkbox__Icon.Polaris-Checkbox--animated{
        transition:initial;
      }

.Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop{
      border-color: var(--p-color-border-disabled);
      border-color:transparent;
      background-color:var(--p-color-checkbox-bg-surface-disabled);
      box-shadow:none;
    }

.Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop::before {
  background-color: var(--p-color-bg-surface-disabled);
}

.Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop:hover {
  cursor: default;
}

.Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop::before{
        background-color:transparent;
      }

.Polaris-Checkbox__Input:disabled ~ .Polaris-Checkbox__Icon svg{
      color:var(--p-color-checkbox-icon-disabled);
    }

.Polaris-Checkbox__Input:disabled:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate:disabled + .Polaris-Checkbox__Backdrop{
      background-color:var(--p-color-checkbox-bg-surface-disabled);
    }

.Polaris-Checkbox__Input:disabled:checked + .Polaris-Checkbox__Backdrop::before, .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate:disabled + .Polaris-Checkbox__Backdrop::before{
        background-color:transparent;
      }

.Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic + .Polaris-Checkbox__Backdrop{
      background-color:var(--p-color-bg-surface-magic);
      box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-border-magic-secondary);
    }

.Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic + .Polaris-Checkbox__Backdrop{
        background-color:var(--p-color-bg-surface-magic-hover);
        box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-border-magic-secondary-hover);
      }

.Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop{
        border-color:var(--p-color-bg-fill-magic);
        background-color:var(--p-color-bg-fill-magic);
        box-shadow:inset 0 0 0 var(--p-space-800) var(--p-color-bg-fill-magic);
      }

.Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input.Polaris-Checkbox--toneMagic.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop{
          border-color:var(--p-color-bg-fill-magic);
          background-color:var(--p-color-bg-fill-magic);
          box-shadow:inset 0 0 0 var(--p-space-800) var(--p-color-bg-fill-magic);
        }

.Polaris-Checkbox__Backdrop{
  position: relative;
  border: var(--p-border-width-050) solid var(--p-color-input-border);
  background-color: var(--p-color-bg-surface);
  border-radius: var(--p-border-radius-100);
  position:relative;
  display:block;
  width:100%;
  height:100%;

  border:var(--p-border-width-0165) solid var(--p-color-input-border);
}

.Polaris-Checkbox__Backdrop.Polaris-Checkbox--hover,.Polaris-Checkbox__Backdrop:hover {
  cursor: pointer;
  border-color: var(--p-color-border-hover);
}

.Polaris-Checkbox__Backdrop:hover{
    border-color:var(--p-color-input-border-hover);
  }

.Polaris-Checkbox__Icon{
  position:absolute;
  transform-origin:50% 50%;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-out), transform var(--p-motion-duration-100) var(--p-motion-ease-out);

  top:calc(var(--p-space-050)*-1);
  left:calc(var(--p-space-050)*-1);
  bottom:calc(var(--p-space-050)*-1);
  right:calc(var(--p-space-050)*-1);
}

.Polaris-Checkbox__Icon.Polaris-Checkbox--animated{
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:var(--p-space-050);
    transition:initial;
  }

.Polaris-Checkbox__Icon svg{
    color:var(--p-color-text-brand-on-bg-fill);

    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
  }

@media (-ms-high-contrast: active){

.Polaris-Checkbox__Icon{
    fill:windowText;
}
  }

.Polaris-Checkbox--error .Polaris-Checkbox__Icon svg{
    color:var(--p-color-text-critical-on-bg-fill);
  }

.Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop{
      border-color: var(--p-color-border-critical);
      background-color: var(--p-color-bg-fill-critical-secondary);
      background-color:var(--p-color-bg-surface-critical);
      box-shadow:inset 0 0 0 var(--p-border-width-0165) var(--p-color-bg-fill-critical-active);
    }

.Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop.Polaris-Checkbox--hover, .Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop:hover {
  border-color: var(--p-color-border-critical);
}

.Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop::before {
  background-color: var(--p-color-border-critical);
}

.Polaris-Checkbox--error .Polaris-Checkbox__Backdrop:active{
      box-shadow:inset 0 0 0 var(--p-space-050) var(--p-color-bg-fill-critical-active);
    }

.Polaris-Checkbox--error .Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop, .Polaris-Checkbox--error .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop{
      background-color:var(--p-color-bg-fill-critical-selected);
      box-shadow:inset 0 0 0 var(--p-space-300) var(--p-color-bg-fill-critical-selected);
    }

.Polaris-Checkbox--error .Polaris-Checkbox__Input:active + .Polaris-Checkbox__Backdrop{
      background-color:var(--p-color-border-critical);
      box-shadow:inset 0 0 0 var(--p-space-050) var(--p-color-bg-fill-critical-active);
    }

.Polaris-Checkbox--error .Polaris-Checkbox__Input:focus-visible + .Polaris-Checkbox__Backdrop,
    .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox--error .Polaris-Checkbox__Input:focus-visible + .Polaris-Checkbox__Backdrop{
      border-color:var(--p-color-border-critical-secondary);
      background-color:var(--p-color-bg-surface-critical);
    }

.Polaris-Checkbox--animated svg > path{
  stroke-dasharray:2;
  stroke-dashoffset:2;
}

.Polaris-Checkbox--animated svg > path.Polaris-Checkbox--checked{
    animation-name:Polaris-Checkbox--pathAnimation;
    animation-duration:var(--p-motion-duration-150);
    animation-fill-mode:forwards;
    animation-timing-function:linear;
    animation-direction:normal;
    animation-iteration-count:1;
    opacity:1;
  }

@keyframes Polaris-Checkbox--pathAnimation{
  from{
    stroke-dashoffset:2;
  }

  to{
    stroke-dashoffset:0;
  }
}


.Polaris-Listbox-TextOption{
  margin:var(--p-space-100) var(--p-space-200) 0;
  flex:1 1;
  border-radius:var(--p-border-radius-200);
  padding:var(--p-space-150) var(--p-space-300);
  cursor:pointer;
  display:flex;
  position: relative;
}

.Polaris-Listbox-TextOption::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--allowMultiple{
    margin:var(--p-space-100) var(--p-space-200) 0;
    padding:var(--p-space-100) var(--p-space-200);
  }

.Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--isAction{
    margin-top:var(--p-space-100);
  }

.Polaris-Listbox-TextOption:hover{
    background-color:var(--p-color-bg-surface-hover);
  }

.Polaris-Listbox-TextOption:hover:not(.Polaris-Listbox-TextOption--disabled){
      background-color:var(--p-color-bg-surface-secondary-hover);
    }

.Polaris-Listbox-TextOption:focus{
    outline:none;
  }

.Polaris-Listbox-TextOption:active{
    background-color:var(--p-color-bg-surface-active);
  }

.Polaris-Listbox-TextOption:active:not(.Polaris-Listbox-TextOption--disabled){
      background-color:var(--p-color-bg-surface-secondary-active);
    }

.Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--selected{
    background-color:var(--p-color-bg-surface-secondary-selected);
    font-weight:var(--p-font-weight-semibold);
  }

.Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--selected svg{
      fill:var(--p-color-icon-active);
    }

.Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--selected::before{
    content:none;
    position:absolute;
    top:0;
    bottom:0;
    left:calc(var(--p-space-100)*-1);
    height:100%;
    width:var(--p-border-radius-100);
    background-color:var(--p-color-bg-fill-brand);
    border-top-right-radius:var(--p-border-radius-100);
    border-bottom-right-radius:var(--p-border-radius-100);
    transform:translateX(-100%);
  }

.Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--disabled{
    background-color:transparent;
    color:var(--p-color-text-disabled);
    cursor:default;
  }

li:first-of-type > .Polaris-Listbox-TextOption{
  margin-top:0;
}

[data-focused] .Polaris-Listbox-TextOption:not(.Polaris-Listbox-TextOption--disabled){
  outline:none;
  background-color:var(--p-color-bg-surface-secondary-selected);
  transition:background-color var(--p-motion-duration-400);
}

.Polaris-Listbox-TextOption__Content{
  flex:1 1 auto;
  display:flex;
}

.Polaris-Listbox-TextOption__Checkbox{
  pointer-events:none;
}


.Polaris-Listbox-Option{
  display:flex;
  margin:0;
  padding:0;
}

.Polaris-Listbox-Option:focus{
    outline:none;
  }

.Polaris-Listbox-Option--divider{
  border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary);
}


.Polaris-Listbox-Loading__ListItem{
  padding:0;
  margin:0;
}

.Polaris-Listbox-Loading{
  padding:var(--p-space-200) var(--p-space-400);
  display:grid;
  place-items:center;
}


.Polaris-Listbox-Action{
  display:flex;
  flex:1 1;
}

.Polaris-Listbox-Action__ActionDivider{
  margin-bottom:var(--p-space-100);
}

.Polaris-Listbox-Action__Icon{
  padding-right:var(--p-space-200);
}


.Polaris-Listbox{
  padding:0;
  margin:0;
  list-style:none;
  max-width:100%;
}
.Polaris-Listbox:focus{
    outline:none;
  }


.Polaris-Autocomplete-MappedOption__Content{
  display:flex;
  flex:1 1;
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:break-word;
}

.Polaris-Autocomplete-MappedOption__Media{
  padding:0 var(--p-space-200);
}

.Polaris-Autocomplete-MappedOption__Media svg{
    fill:var(--p-color-icon);
  }

.Polaris-Autocomplete-MappedOption--singleSelectionMedia{
  padding:0 var(--p-space-200) 0 0;
}

.Polaris-Autocomplete-MappedOption--disabledMedia svg{
  fill:var(--p-color-icon-disabled);
}


.Polaris-Autocomplete-MappedAction__ActionContainer{
  --pc-mapped-actions-image-size:1.25rem;
  --pc-mapped-actions-item-min-height:var(--p-space-1000);
  --pc-mapped-actions-item-vertical-padding:calc((var(--pc-mapped-actions-item-min-height) - var(--p-font-line-height-500))/2);
  margin-bottom:var(--p-space-300);
}

[data-focused] .Polaris-Autocomplete-MappedAction__Action svg{
      fill:var(--p-color-icon);
    }

[data-focused] .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive{
      background-color:var(--p-color-bg-surface-critical-active);
    }

[data-focused] .Polaris-Autocomplete-MappedAction__Action:hover{
      background-color:transparent;
    }

.Polaris-Autocomplete-MappedAction__Action{
  position: relative;
  display:block;
  flex:1 1;
  min-height:var(--pc-mapped-actions-item-min-height);
  text-align:left;
  cursor:pointer;
  padding:var(--pc-mapped-actions-item-vertical-padding) var(--p-space-200);
  margin:calc(var(--pc-mapped-actions-item-vertical-padding)*-1) calc(var(--p-space-300)*-1);
  border-radius:var(--p-border-radius-200);
}

.Polaris-Autocomplete-MappedAction__Action::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Autocomplete-MappedAction__Action:hover{
    background-color:var(--p-color-bg-surface-hover);
    text-decoration:none;
  }

@media (-ms-high-contrast: active){

.Polaris-Autocomplete-MappedAction__Action:hover{
      outline:var(--p-border-width-025) solid windowText;
  }
    }

.Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--selected{
    background-color:var(--p-color-bg-surface-brand-selected);
  }

.Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--selected svg{
      fill:var(--p-color-icon-emphasis);
    }

.Polaris-Autocomplete-MappedAction__Action:active{
    background-color:var(--p-color-bg-surface-active);
  }

.Polaris-Autocomplete-MappedAction__Action:active svg{
      fill:var(--p-color-icon-emphasis);
    }

.Polaris-Autocomplete-MappedAction__Action:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive{
    color:var(--p-color-text-critical);
  }

.Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive svg{
      fill:var(--p-color-icon-critical);
    }

.Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive:hover{
      background-color:var(--p-color-bg-surface-critical-hover);
    }

.Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive:active,
    .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive.Polaris-Autocomplete-MappedAction--selected{
      background-color:var(--p-color-bg-surface-critical-active);
    }

.Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--disabled{
    background-image:none;
    color:var(--p-color-text-disabled);
  }

.Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--disabled .Polaris-Autocomplete-MappedAction__Prefix svg,
    .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--disabled .Polaris-Autocomplete-MappedAction__Suffix svg{
      fill:var(--p-color-icon-disabled);
    }

.Polaris-Autocomplete-MappedAction__Content{
  display:flex;
  align-items:center;
}

.Polaris-Autocomplete-MappedAction__Prefix{
  display:flex;
  flex:0 0 auto;
  justify-content:center;
  align-items:center;
  height:var(--pc-mapped-actions-image-size);
  width:var(--pc-mapped-actions-image-size);
  border-radius:var(--p-border-radius-100);
  margin:calc(var(--pc-mapped-actions-image-size)*-0.5) var(--p-space-400) calc(var(--pc-mapped-actions-image-size)*-0.5) 0;
  margin-right:var(--p-space-200);
  background-size:cover;
  background-position:center center;
}

.Polaris-Autocomplete-MappedAction__Prefix svg{
    fill:var(--p-color-icon);
  }

.Polaris-Autocomplete-MappedAction__Suffix{
  margin-left:var(--p-space-400);
}

.Polaris-Autocomplete-MappedAction__Suffix svg{
    fill:var(--p-color-icon);
  }

.Polaris-Autocomplete-MappedAction__Text{
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
}


.Polaris-Autocomplete__Loading{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  padding:var(--p-space-200) var(--p-space-400);
}

.Polaris-Autocomplete__SectionWrapper > *:not(:first-child){
    margin-top:var(--p-space-200);
  }


[data-lock-scrolling]{
  overflow-y:scroll;
  margin:0;
}
[data-lock-scrolling][data-lock-scrolling-hidden]{
    overflow-y:hidden;
  }
[data-lock-scrolling] [data-lock-scrolling-wrapper]{
    overflow:hidden;
    height:100%;
  }


.Polaris-Backdrop{
  position:fixed;
  z-index:var(--p-z-index-10);
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:block;
  background-color:rgba(0, 0, 0, 0.5);
  animation:var(--p-motion-keyframes-fade-in) var(--p-motion-duration-200) 1 forwards;
  opacity:0;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:opacity;
}

.Polaris-Backdrop--transparent{
  background-color:transparent;
}

.Polaris-Backdrop--belowNavigation{
  z-index:var(--p-z-index-7);
}


.Polaris-ButtonGroup{
  --pc-button-group-item:10;
  --pc-button-group-focused:20;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin-top:calc(var(--p-space-200)*-1);
  margin-left:calc(var(--p-space-200)*-1);
}

.Polaris-ButtonGroup__Item{
  margin-top:var(--p-space-200);
  margin-left:var(--p-space-200);
}

.Polaris-ButtonGroup__Item--plain:not(:first-child){
    margin-left:var(--p-space-200);
  }

.Polaris-ButtonGroup__Item--plain:not(:last-child){
    margin-right:var(--p-space-200);
  }

.Polaris-ButtonGroup--variantSegmented{
  display:flex;
  flex-wrap:nowrap;
  margin-top:0;
  margin-left:0;
}

.Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item{
    position:relative;
    margin-top:0;
    margin-left:0;
    line-height:1;
  }

.Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item:not(:first-child){
      margin-left:calc(var(--p-space-025)*-1);
    }

.Polaris-ButtonGroup--variantSegmented [aria-pressed='true']{
    z-index:var(--pc-button-group-item);
  }

.Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item--focused{
    z-index:var(--pc-button-group-focused);
  }

.Polaris-ButtonGroup--fullWidth .Polaris-ButtonGroup__Item{
    flex:1 1 auto;
  }

.Polaris-ButtonGroup--extraTight{
  margin-top:calc(var(--p-space-100)*-1);
  margin-left:calc(var(--p-space-100)*-1);
}

.Polaris-ButtonGroup--extraTight .Polaris-ButtonGroup__Item{
    margin-top:var(--p-space-100);
    margin-left:var(--p-space-100);
  }

.Polaris-ButtonGroup--tight{
  margin-top:calc(var(--p-space-200)*-1);
  margin-left:calc(var(--p-space-200)*-1);
}

.Polaris-ButtonGroup--tight .Polaris-ButtonGroup__Item{
    margin-top:var(--p-space-200);
    margin-left:var(--p-space-200);
  }

.Polaris-ButtonGroup--loose{
  margin-top:calc(var(--p-space-500)*-1);
  margin-left:calc(var(--p-space-500)*-1);
}

.Polaris-ButtonGroup--loose .Polaris-ButtonGroup__Item{
    margin-top:var(--p-space-500);
    margin-left:var(--p-space-500);
  }

.Polaris-ButtonGroup--noWrap{
  display:flex;
  flex-wrap:nowrap;
}


.Polaris-Banner{
  background-color:var(--p-color-bg-surface);
  position:relative;
  display:flex;
}

.Polaris-Banner:focus{
    outline:none;
  }

.Polaris-Banner.Polaris-Banner--keyFocused{
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
  }

.Polaris-Banner--withinContentContainer{
  border-radius:var(--p-border-radius-200);
}

.Polaris-Banner--withinContentContainer + .Polaris-Banner{
    margin-top:var(--p-space-200);
  }

.Polaris-Banner--withinPage{
  position: relative;
  box-shadow: var(--p-shadow-200);
  border-radius: var(--p-border-radius-0);
}

.Polaris-Banner--withinPage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  box-shadow: var(--p-shadow-bevel-100);
  border-radius: var(--p-border-radius-0);
  pointer-events: none;
  mix-blend-mode: luminosity;
}

@media (min-width: 30.625em){

.Polaris-Banner--withinPage{
    position: relative;
    box-shadow: var(--p-shadow-200);
    border-radius: var(--p-border-radius-300);
}
    .Polaris-Banner--withinPage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    box-shadow: var(--p-shadow-bevel-100);
    border-radius: var(--p-border-radius-300);
    pointer-events: none;
    mix-blend-mode: luminosity;
  }
  }

.Polaris-Banner--withinPage + .Polaris-Banner{
    margin-top:var(--p-space-400);
  }

.Polaris-Banner__DismissIcon{
  display:flex;
}

.Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill svg,
  .Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill path{
    fill:var(--p-color-text-success-on-bg-fill);
  }

.Polaris-Banner__text--success.Polaris-Banner__text--success.Polaris-Banner__text--success svg,
  .Polaris-Banner__text--success.Polaris-Banner__text--success.Polaris-Banner__text--success path{
    fill:var(--p-color-text-success);
  }

.Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill svg,
  .Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill path{
    fill:var(--p-color-text-warning-on-bg-fill);
  }

.Polaris-Banner__text--warning.Polaris-Banner__text--warning.Polaris-Banner__text--warning svg,
  .Polaris-Banner__text--warning.Polaris-Banner__text--warning.Polaris-Banner__text--warning path{
    fill:var(--p-color-text-warning);
  }

.Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill svg,
  .Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill path{
    fill:var(--p-color-text-critical-on-bg-fill);
  }

.Polaris-Banner__text--critical.Polaris-Banner__text--critical.Polaris-Banner__text--critical svg,
  .Polaris-Banner__text--critical.Polaris-Banner__text--critical.Polaris-Banner__text--critical path{
    fill:var(--p-color-text-critical);
  }

.Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill svg,
  .Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill path{
    fill:var(--p-color-text-info-on-bg-fill);
  }

.Polaris-Banner__text--info.Polaris-Banner__text--info.Polaris-Banner__text--info svg,
  .Polaris-Banner__text--info.Polaris-Banner__text--info.Polaris-Banner__text--info path{
    fill:var(--p-color-text-info);
  }

.Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary svg,
  .Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary path{
    fill:var(--p-color-icon-secondary);
  }


.Polaris-Bleed{
  --pc-bleed-margin-block-start-xs:initial;
  --pc-bleed-margin-block-start-sm:var(--pc-bleed-margin-block-start-xs);
  --pc-bleed-margin-block-start-md:var(--pc-bleed-margin-block-start-sm);
  --pc-bleed-margin-block-start-lg:var(--pc-bleed-margin-block-start-md);
  --pc-bleed-margin-block-start-xl:var(--pc-bleed-margin-block-start-lg);
  --pc-bleed-margin-block-end-xs:initial;
  --pc-bleed-margin-block-end-sm:var(--pc-bleed-margin-block-end-xs);
  --pc-bleed-margin-block-end-md:var(--pc-bleed-margin-block-end-sm);
  --pc-bleed-margin-block-end-lg:var(--pc-bleed-margin-block-end-md);
  --pc-bleed-margin-block-end-xl:var(--pc-bleed-margin-block-end-lg);
  --pc-bleed-margin-inline-start-xs:initial;
  --pc-bleed-margin-inline-start-sm:var(--pc-bleed-margin-inline-start-xs);
  --pc-bleed-margin-inline-start-md:var(--pc-bleed-margin-inline-start-sm);
  --pc-bleed-margin-inline-start-lg:var(--pc-bleed-margin-inline-start-md);
  --pc-bleed-margin-inline-start-xl:var(--pc-bleed-margin-inline-start-lg);
  --pc-bleed-margin-inline-end-xs:initial;
  --pc-bleed-margin-inline-end-sm:var(--pc-bleed-margin-inline-end-xs);
  --pc-bleed-margin-inline-end-md:var(--pc-bleed-margin-inline-end-sm);
  --pc-bleed-margin-inline-end-lg:var(--pc-bleed-margin-inline-end-md);
  --pc-bleed-margin-inline-end-xl:var(--pc-bleed-margin-inline-end-lg);
  margin-block-start:calc(var(--pc-bleed-margin-block-start-xs)*-1);
  margin-block-end:calc(var(--pc-bleed-margin-block-end-xs)*-1);
  margin-inline-start:calc(var(--pc-bleed-margin-inline-start-xs)*-1);
  margin-inline-end:calc(var(--pc-bleed-margin-inline-end-xs)*-1);
}
@media (min-width: 30.625em){
  .Polaris-Bleed{
    margin-block-start:calc(var(--pc-bleed-margin-block-start-sm)*-1);
    margin-block-end:calc(var(--pc-bleed-margin-block-end-sm)*-1);
    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-sm)*-1);
    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-sm)*-1);
}
  }
@media (min-width: 48em){
  .Polaris-Bleed{
    margin-block-start:calc(var(--pc-bleed-margin-block-start-md)*-1);
    margin-block-end:calc(var(--pc-bleed-margin-block-end-md)*-1);
    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-md)*-1);
    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-md)*-1);
}
  }
@media (min-width: 65em){
  .Polaris-Bleed{
    margin-block-start:calc(var(--pc-bleed-margin-block-start-lg)*-1);
    margin-block-end:calc(var(--pc-bleed-margin-block-end-lg)*-1);
    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-lg)*-1);
    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-lg)*-1);
}
  }
@media (min-width: 90em){
  .Polaris-Bleed{
    margin-block-start:calc(var(--pc-bleed-margin-block-start-xl)*-1);
    margin-block-end:calc(var(--pc-bleed-margin-block-end-xl)*-1);
    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-xl)*-1);
    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-xl)*-1);
}
  }


.Polaris-CheckableButton{
  color:var(--p-color-text);
  display:flex;
  align-items:center;
  gap:calc(var(--p-space-300) + var(--p-space-025));
  margin:0;
  cursor:pointer;
  -webkit-user-select:none;
          user-select:none;
  text-decoration:none;
  text-align:left;
  border-radius:var(--p-border-radius-100);
  width:auto;
  min-height:auto;
  min-width:auto;
  height:100%;
}

.Polaris-CheckableButton svg{
    fill:var(--p-color-text-brand-on-bg-fill);
  }

.Polaris-CheckableButton:hover,
  .Polaris-CheckableButton:active{
    background:transparent;
  }

.Polaris-CheckableButton:focus{
    outline:none;
  }

.Polaris-CheckableButton__Checkbox{
  pointer-events:none;
  display:flex;
}

.Polaris-CheckableButton__Label{
  display:flex;
  align-items:center;
  flex:1 1;
  white-space:nowrap;
  overflow:hidden;
  max-width:100%;
  text-overflow:ellipsis;
  padding:var(--p-space-025) 0;
}


.Polaris-Indicator{
  --pc-indicator-size:0.625rem;
  --pc-indicator-base-position:calc(var(--p-space-100)*-1);
}

.Polaris-Indicator::before,
  .Polaris-Indicator::after{
    content:'';
    position:absolute;
    background-color:var(--p-color-border-info);
    right:var(--pc-indicator-base-position);
    top:var(--pc-indicator-base-position);
    width:var(--pc-indicator-size);
    height:var(--pc-indicator-size);
    border-radius:var(--p-border-radius-full);
    border:calc(var(--pc-indicator-size)/2) solid transparent;
  }

.Polaris-Indicator--pulseIndicator::before{
  z-index:1;
  animation:var(--p-motion-keyframes-bounce) var(--p-motion-duration-5000) ease infinite;
}

.Polaris-Indicator--pulseIndicator::after{
  right:var(--pc-indicator-base-position);
  top:var(--pc-indicator-base-position);
  animation:var(--p-motion-keyframes-pulse) var(--p-motion-duration-5000) ease infinite;
}


.Polaris-BulkActions__BulkActionsOuterLayout{
  position:relative;
  flex:1 1;
  width:100%;
}

.Polaris-BulkActions__BulkActionsSelectAllWrapper{
  min-height:1.5rem;
  display:flex;
  align-items:center;
  gap:var(--p-space-200);
}

.Polaris-BulkActions__BulkActionsPromotedActionsWrapper{
  flex:1 1;
}

.Polaris-BulkActions__BulkActionsLayout{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  flex:1 1 auto;
  gap:var(--p-space-100);
}

.Polaris-BulkActions__BulkActionsLayout > *{
    flex:0 0 auto;
  }

.Polaris-BulkActions--bulkActionsLayoutMeasuring{
  visibility:hidden;
  height:0;
}

.Polaris-BulkActions__BulkActionsMeasurerLayout{
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  flex:1 1 auto;
  gap:0;
  padding:0;
  visibility:hidden;
  height:0;
  width:100%;
}

.Polaris-BulkActions__BulkActionsMeasurerLayout > *{
    flex:0 0 auto;
  }

.Polaris-BulkActions__BulkActionButton{
  white-space:nowrap;
}

.Polaris-BulkActions__BulkActionButton button{
    display:flex;
  }

.Polaris-BulkActions--disabled{
  transition:none;
  box-shadow:none;
  border-color:var(--p-color-border-disabled);
  background:var(--p-color-bg-fill-disabled);
  color:var(--p-color-text-disabled);
  cursor:default;
  pointer-events:none;
}

.Polaris-BulkActions--disabled svg{
    fill:var(--p-color-icon-disabled);
  }

.Polaris-BulkActions__AllAction{
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  color:var(--p-color-text-emphasis);
  outline:none;
  position: relative;
}

.Polaris-BulkActions__AllAction::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-BulkActions__AllAction:hover,
  .Polaris-BulkActions__AllAction:focus{
    color:var(--p-color-text-emphasis-hover);
  }

.Polaris-BulkActions__AllAction:active{
    color:var(--p-color-text-emphasis-active);
  }

.Polaris-BulkActions__AllAction:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}


.Polaris-LegacyCard{
  background-color:var(--p-color-bg-surface);
  box-shadow:var(--p-shadow-300);
  outline:var(--p-border-width-025) solid transparent;
  overflow:clip;

  position: relative;

  box-shadow: var(--p-shadow-100);

  border-radius: var(--p-border-radius-0);
}

.Polaris-LegacyCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  box-shadow: var(--p-shadow-bevel-100);
  border-radius: var(--p-border-radius-0);
  pointer-events: none;
  mix-blend-mode: luminosity;
}

.Polaris-LegacyCard + .Polaris-LegacyCard{
    margin-top:var(--p-space-400);
  }

@media print{

.Polaris-LegacyCard + .Polaris-LegacyCard{
      margin-top:calc(var(--p-space-200)*-1);
  }
    }

@media (min-width: 30.625em){

.Polaris-LegacyCard{
    border-radius:var(--p-border-radius-200);

    position: relative;

    box-shadow: var(--p-shadow-100);

    border-radius: var(--p-border-radius-300);
}

    .Polaris-LegacyCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    box-shadow: var(--p-shadow-bevel-100);
    border-radius: var(--p-border-radius-300);
    pointer-events: none;
    mix-blend-mode: luminosity;
  }

    .Polaris-LegacyCard .Polaris-LegacyCard__Section:first-child{
      border-top-left-radius:var(--p-border-radius-300);
      border-top-right-radius:var(--p-border-radius-300);
    }

    .Polaris-LegacyCard .Polaris-LegacyCard__Section:last-child{
      border-bottom-left-radius:var(--p-border-radius-300);
      border-bottom-right-radius:var(--p-border-radius-300);
    }
  }

@media print{

.Polaris-LegacyCard{
    box-shadow:none;

    position: relative;

    box-shadow: none;

    border-radius: var(--p-border-radius-0);

    border: none;
}

    .Polaris-LegacyCard::before {
    content: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    box-shadow: var(--p-shadow-bevel-100);
    border-radius: var(--p-border-radius-0);
    pointer-events: none;
    mix-blend-mode: luminosity;
  }
  }

.Polaris-LegacyCard--subdued{
  background-color:var(--p-color-bg-surface-secondary);
}

@media print{

.Polaris-LegacyCard__Section--hideOnPrint,
.Polaris-LegacyCard--hideOnPrint{
    display:none !important;
}
  }

.Polaris-LegacyCard__Header{
  padding:var(--p-space-400) var(--p-space-400) 0;
}

@media (min-width: 30.625em){

.Polaris-LegacyCard__Header{
    padding:var(--p-space-200) var(--p-space-400) 0;
}
  }

@media print and (min-width: 30.625em){
  .Polaris-LegacyCard__Header{
    padding:var(--p-space-200) var(--p-space-400) 0;
  }
}

.Polaris-LegacyCard__Section{
  padding:var(--p-space-200) var(--p-space-400);
}

@media (min-width: 30.625em){

.Polaris-LegacyCard__Section{
    padding:var(--p-space-200) var(--p-space-400);
}
  }

.Polaris-LegacyCard__Section + .Polaris-LegacyCard__Section{
    border-top:0;
  }

@media print{

.Polaris-LegacyCard__Section + .Polaris-LegacyCard__Section{
      border-top:0;
  }
    }

@media print{

.Polaris-LegacyCard__Section{
    padding-top:var(--p-space-100);
    padding-bottom:var(--p-space-100);
}
  }

.Polaris-LegacyCard__Section--fullWidth{
  padding:var(--p-space-400) 0;
}

@media (min-width: 30.625em){

.Polaris-LegacyCard__Section--fullWidth{
    padding:var(--p-space-400) 0;
}
  }

.Polaris-LegacyCard__Section--flush{
  padding:0;
}

@media (min-width: 30.625em){

.Polaris-LegacyCard__Section--flush{
    padding:0;
}
  }

.Polaris-LegacyCard__Section--subdued{
  background-color:var(--p-color-bg-surface-secondary);
  padding:var(--p-space-300) var(--p-space-400);
}

@media (-ms-high-contrast: active){

.Polaris-LegacyCard__Section--subdued{
    background-color:transparent;
}
  }

.Polaris-LegacyCard__Header + .Polaris-LegacyCard__Section--subdued{
    border-top:0;
    margin-top:0;
  }

.Polaris-LegacyCard__Section--subdued:last-child{
  padding:var(--p-space-400);
}

@media print{

.Polaris-LegacyCard__Section--subdued:last-child{
    padding-top:var(--p-space-200);
    padding-bottom:var(--p-space-200);
}
  }

.Polaris-LegacyCard__SectionHeader{
  padding-bottom:var(--p-space-200);
}

.Polaris-LegacyCard__Section--fullWidth .Polaris-LegacyCard__SectionHeader{
    padding-left:var(--p-space-400);
    padding-right:var(--p-space-400);
  }

@media (min-width: 30.625em){

.Polaris-LegacyCard__Section--fullWidth .Polaris-LegacyCard__SectionHeader{
      padding-left:var(--p-space-400);
      padding-right:var(--p-space-400);
  }
    }

.Polaris-LegacyCard__Subsection + .Polaris-LegacyCard__Subsection{
    border-top:0;
    margin-top:0;
    padding-top:var(--p-space-200);
  }

@media print{

.Polaris-LegacyCard__Subsection + .Polaris-LegacyCard__Subsection{
      border-top:0;
  }
    }

@media print{

.Polaris-LegacyCard__Subsection{
    padding-top:var(--p-space-100);
    padding-bottom:var(--p-space-100);
}
  }

.Polaris-LegacyCard__Footer{
  display:flex;
  justify-content:flex-end;

  padding:0 var(--p-space-400) var(--p-space-400);
}

@media (min-width: 30.625em){

.Polaris-LegacyCard__Footer{
    padding:0 var(--p-space-400) var(--p-space-400);
}
  }

.Polaris-LegacyCard__Footer.Polaris-LegacyCard__LeftJustified{
    justify-content:flex-start;
  }

.Polaris-LegacyCard__Section--subdued + .Polaris-LegacyCard__Footer{
    padding:var(--p-space-400);
    border-top:0;
  }

.Polaris-LegacyCard__FirstSectionPadding{
  padding-top:var(--p-space-400);
}

.Polaris-LegacyCard__LastSectionPadding{
  padding-bottom:var(--p-space-400);
}


.Polaris-LegacyStack{
  --pc-stack-spacing:var(--p-space-400);
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  margin-top:calc(var(--pc-stack-spacing)*-1);
  margin-left:calc(var(--pc-stack-spacing)*-1);
}

.Polaris-LegacyStack > .Polaris-LegacyStack__Item{
    margin-top:var(--pc-stack-spacing);
    margin-left:var(--pc-stack-spacing);
    max-width:100%;
  }

.Polaris-LegacyStack--noWrap{
  flex-wrap:nowrap;
}

.Polaris-LegacyStack--spacingNone{
  --pc-stack-spacing:0;
}

.Polaris-LegacyStack--spacingExtraTight{
  --pc-stack-spacing:var(--p-space-100);
}

.Polaris-LegacyStack--spacingTight{
  --pc-stack-spacing:var(--p-space-200);
}

.Polaris-LegacyStack--spacingBaseTight{
  --pc-stack-spacing:var(--p-space-300);
}

.Polaris-LegacyStack--spacingLoose{
  --pc-stack-spacing:var(--p-space-500);
}

.Polaris-LegacyStack--spacingExtraLoose{
  --pc-stack-spacing:var(--p-space-800);
}

.Polaris-LegacyStack--distributionLeading{
  justify-content:flex-start;
}

.Polaris-LegacyStack--distributionTrailing{
  justify-content:flex-end;
}

.Polaris-LegacyStack--distributionCenter{
  justify-content:center;
}

.Polaris-LegacyStack--distributionEqualSpacing{
  justify-content:space-between;
}

.Polaris-LegacyStack--distributionFill > .Polaris-LegacyStack__Item{
  flex:1 1 auto;
}

.Polaris-LegacyStack--distributionFillEvenly > .Polaris-LegacyStack__Item{
  flex:1 1 auto;
}

@supports ((min-width: -webkit-fit-content) or (min-width: -moz-fit-content) or (min-width: fit-content)){

.Polaris-LegacyStack--distributionFillEvenly > .Polaris-LegacyStack__Item{
    flex:1 0;
    min-width:-webkit-fit-content;
    min-width:-moz-fit-content;
    min-width:fit-content;
}
  }

.Polaris-LegacyStack--alignmentLeading{
  align-items:flex-start;
}

.Polaris-LegacyStack--alignmentTrailing{
  align-items:flex-end;
}

.Polaris-LegacyStack--alignmentCenter{
  align-items:center;
}

.Polaris-LegacyStack--alignmentFill{
  align-items:stretch;
}

.Polaris-LegacyStack--alignmentBaseline{
  align-items:baseline;
}

.Polaris-LegacyStack--vertical{
  flex-direction:column;
  margin-left:0;
}

.Polaris-LegacyStack--vertical > .Polaris-LegacyStack__Item{
    margin-left:0;
  }

.Polaris-LegacyStack__Item{
  flex:0 0 auto;
  min-width:0;
}

.Polaris-LegacyStack__Item--fill{
  flex:1 1 auto;
}


.Polaris-CalloutCard{
  display:flex;
  align-items:center;
}

.Polaris-CalloutCard__Image{
  display:none;
  flex:0 0 auto;
  width:6.25rem;
}

@media (min-width: 30.625em){

.Polaris-CalloutCard__Image{
    display:block;
    margin-left:var(--p-space-500);
}
  }

.Polaris-CalloutCard__DismissImage{
  margin-right:var(--p-space-500);
}

.Polaris-CalloutCard__Content{
  flex:1 1 auto;
}

.Polaris-CalloutCard__Title{
  margin-bottom:var(--p-space-200);
}

.Polaris-CalloutCard__Buttons{
  margin-top:var(--p-space-200);
}

.Polaris-CalloutCard__Container{
  position:relative;
}

.Polaris-CalloutCard__Dismiss{
  right:var(--p-space-300);
  top:var(--p-space-400);
  position:absolute;
}

.Polaris-CalloutCard__Dismiss svg{
    fill:var(--p-color-icon-secondary);
  }

.Polaris-CalloutCard--hasDismiss{
  padding-right:calc(var(--p-space-800) + var(--p-space-300));
}


.Polaris-RadioButton{
  position:relative;
  margin:var(--p-space-025);
}

.Polaris-RadioButton__Input{
  position: absolute !important;
  top: 0;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.Polaris-RadioButton__Input:focus-visible + .Polaris-RadioButton__Backdrop{
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-025);
  }

.Polaris-RadioButton__Input:focus-visible + .Polaris-RadioButton__Backdrop::after{
      border-radius:var(--p-border-radius-full);
    }

.Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop,
    
    
    
    
    .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop{
      border-color:var(--p-color-border-emphasis);
    }

.Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop::before, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop::before{
        background-color:var(--p-color-text-brand-on-bg-fill);
        transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out), transform var(--p-motion-duration-150) var(--p-motion-ease-out);
        opacity:1;
        transform:translate(-50%, -50%) scale(1);
      }

.Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop,
    .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop{
      background-color:var(--p-color-bg-fill-brand-selected);
      border-color:var(--p-color-bg-fill-brand-selected);
    }

.Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop,
    .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop{
      background-color:var(--p-color-bg-fill-magic);
      border-color:var(--p-color-bg-fill-magic);
    }

.Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop::before,
      .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop::before{
        background-color:var(--p-color-text-magic-on-bg-fill);
      }

.Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input + .Polaris-RadioButton__Backdrop{
      cursor:pointer;
      border-color:var(--p-color-input-border-hover);
      background:var(--p-color-input-bg-surface-hover);
    }

.Polaris-RadioButton__ChoiceLabel:active .Polaris-RadioButton__Input + .Polaris-RadioButton__Backdrop{
      border-color:var(--p-color-bg-fill-brand);
      border-width:var(--p-border-width-050);
    }

.Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop,
    .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop{
      cursor:default;
      background-color:var(--p-color-radio-button-bg-surface-disabled);
      border:none;
    }

.Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop::before, .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop::before{
        background-color:var(--p-color-border-disabled);
      }

.Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop::before,
    .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop::before{
      background-color:var(--p-color-radio-button-icon-disabled);
    }

.Polaris-RadioButton__Backdrop{
  --pc-icon-size-small:0.5rem;
  position:relative;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:100%;
  border:var(--p-border-width-0165) solid var(--p-color-input-border);
  border-radius:var(--p-border-radius-full);
  background-color:var(--p-color-input-bg-surface);
  transition:border-color var(--p-motion-duration-100) var(--p-motion-ease-out);
}

@media (max-width: 47.9975em){

.Polaris-RadioButton__Backdrop{
    --pc-icon-size-small:0.625rem;
}
  }

.Polaris-RadioButton__Backdrop::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    opacity:0;
    transform:translate(-50%, -50%) scale(0.1);
    transform-origin:50% 50%;
    height:var(--pc-icon-size-small);
    width:var(--pc-icon-size-small);
    background-color:var(--p-color-bg-fill-brand);
    border-radius:var(--p-border-radius-full);
    transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-out), transform var(--p-motion-duration-100) var(--p-motion-ease-out);
  }

@media (forced-colors: active){

.Polaris-RadioButton__Backdrop::before{
      border:var(--p-border-width-100) solid transparent;
  }
    }

.Polaris-RadioButton__Backdrop{
  position: relative;
}

.Polaris-RadioButton__Backdrop::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(var(--p-border-width-050)*-1 + -0.0625rem);
  right: calc(var(--p-border-width-050)*-1 + -0.0625rem);
  bottom: calc(var(--p-border-width-050)*-1 + -0.0625rem);
  left: calc(var(--p-border-width-050)*-1 + -0.0625rem);
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 calc(var(--p-border-width-050)*-1 + -0.0625rem) var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-RadioButton__Backdrop::after{
    border-radius:var(--p-border-radius-full);
  }


.Polaris-ChoiceList__ChoiceChildren{
  padding-left:calc(var(--p-space-200) + 1.25rem);
}


.Polaris-Collapsible{
  padding-top:0;
  padding-bottom:0;
  max-height:0;
  overflow:hidden;
  transition-property:max-height;
  transition-duration:var(--p-motion-duration-100);
  transition-timing-function:var(--p-motion-ease-out);
}

.Polaris-Collapsible--isFullyClosed{
  display:none;
}

@media print{

.Polaris-Collapsible--expandOnPrint{
    max-height:none !important;
    max-width:none !important;
    overflow:visible;
    display:block;
}
  }

.Polaris-Collapsible--inline{
  max-height:none;
  transition-property:max-width;
}

.Polaris-Collapsible--inline.Polaris-Collapsible--animateIn{
    max-width:0;
  }


.Polaris-ColorPicker{
  --pc-color-picker-size:10rem;
  --pc-color-picker-dragger-size:1.125rem;
  --pc-color-picker-z-index:10;
  --pc-color-picker-adjustments:20;
  --pc-color-picker-dragger:30;
  --pc-color-picker-inner-shadow:inset 0 0 0.125rem 0 rgba(0, 0, 0, 0.5);
  --pc-color-picker-dragger-shadow:inset 0 0.0625rem 0.125rem 0 rgba(33, 43, 54, 0.32), 0 0.0625rem 0.125rem 0 rgba(33, 43, 54, 0.32);
  --pc-color-picker-checkers:repeating-conic-gradient(
      var(--p-color-bg-surface) 0% 25%,
      var(--p-color-bg-surface-secondary) 0% 50%
    ) 50% / var(--p-space-400) var(--p-space-400);
  -webkit-user-select:none;
          user-select:none;
  display:flex;
}

.Polaris-ColorPicker__MainColor{
  background:var(--pc-color-picker-checkers);
  position:relative;
  overflow:hidden;
  height:var(--pc-color-picker-size);
  width:var(--pc-color-picker-size);
  border-radius:var(--p-border-radius-100);
  cursor:pointer;
}

.Polaris-ColorPicker--fullWidth .Polaris-ColorPicker__MainColor{
    width:auto;
    flex-grow:1;
  }

.Polaris-ColorPicker__MainColor .Polaris-ColorPicker__Dragger{
    right:calc(var(--pc-color-picker-dragger-size)*0.5);
    margin:0;
    box-shadow:var(--pc-color-picker-dragger-shadow);
  }

.Polaris-ColorPicker__MainColor .Polaris-ColorPicker__ColorLayer{
    border-radius:var(--p-border-radius-100);
  }

.Polaris-ColorPicker__MainColor::after,
  .Polaris-ColorPicker__MainColor::before{
    content:'';
    position:absolute;
    z-index:var(--pc-color-picker-adjustments);
    top:0;
    left:0;
    display:block;
    height:100%;
    width:100%;
    pointer-events:none;
    border-radius:var(--p-border-radius-100);
  }

.Polaris-ColorPicker__MainColor::before{
    background:linear-gradient(to right, white, transparent);
  }

.Polaris-ColorPicker__MainColor::after{
    background-image:linear-gradient(to top, black, transparent);
    box-shadow:var(--pc-color-picker-inner-shadow);
  }

@media (-ms-high-contrast: active){

.Polaris-ColorPicker__MainColor{
    outline:var(--p-border-width-025) solid windowText;
}
  }

.Polaris-ColorPicker__Dragger{
  position:relative;
  z-index:var(--pc-color-picker-dragger);
  bottom:calc(var(--pc-color-picker-dragger-size)*0.5);
  transform:none;
  height:var(--pc-color-picker-dragger-size);
  width:var(--pc-color-picker-dragger-size);
  margin:0 auto;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:transform;
  background:transparent;
  border:var(--p-border-radius-100) solid var(--p-color-bg-surface);
  border-radius:var(--p-border-radius-full);
  pointer-events:none;
  box-shadow:var(--pc-color-picker-dragger-shadow);
}

.Polaris-ColorPicker__HuePicker,
.Polaris-ColorPicker__AlphaPicker{
  --pc-color-picker-vertical-border-radius:calc(var(--pc-color-picker-size)*0.5);
  position:relative;
  overflow:hidden;
  height:var(--pc-color-picker-size);
  width:var(--p-space-600);
  margin-left:var(--p-space-200);
  border-width:var(--p-border-radius-100);
  border-radius:var(--pc-color-picker-vertical-border-radius);
}

.Polaris-ColorPicker__HuePicker::after, .Polaris-ColorPicker__AlphaPicker::after{
    content:'';
    position:absolute;
    z-index:var(--pc-color-picker-adjustments);
    top:0;
    left:0;
    display:block;
    height:100%;
    width:100%;
    pointer-events:none;
    border-radius:var(--pc-color-picker-vertical-border-radius);
    box-shadow:var(--pc-color-picker-inner-shadow);
  }

@media (-ms-high-contrast: active){

.Polaris-ColorPicker__HuePicker,
.Polaris-ColorPicker__AlphaPicker{
    outline:var(--p-border-width-025) solid windowText;
}
  }

.Polaris-ColorPicker__HuePicker{
  background-image:linear-gradient(
    to bottom,
    red var(--pc-color-picker-dragger-size),
    yellow,
    lime,
    cyan,
    blue,
    magenta,
    red calc(var(--pc-color-picker-size) - var(--pc-color-picker-dragger-size))
  );
}

.Polaris-ColorPicker__AlphaPicker{
  background:var(--pc-color-picker-checkers);
}

.Polaris-ColorPicker__ColorLayer{
  position:absolute;
  z-index:var(--pc-color-picker-z-index);
  top:0;
  left:0;
  height:100%;
  width:100%;
  pointer-events:none;
}

.Polaris-ColorPicker__Slidable{
  height:100%;
  width:100%;
  cursor:pointer;
}


.Polaris-InlineGrid{
  --pc-inline-grid-gap-xs: initial;
  --pc-inline-grid-gap-sm: initial;
  --pc-inline-grid-gap-md: initial;
  --pc-inline-grid-gap-lg: initial;
  --pc-inline-grid-gap-xl: initial;
  gap: var(--pc-inline-grid-gap-xs);
  --pc-inline-grid-grid-template-columns-xs: initial;
  --pc-inline-grid-grid-template-columns-sm: initial;
  --pc-inline-grid-grid-template-columns-md: initial;
  --pc-inline-grid-grid-template-columns-lg: initial;
  --pc-inline-grid-grid-template-columns-xl: initial;
  grid-template-columns: var(--pc-inline-grid-grid-template-columns-xs);
  --pc-inline-grid-align-items:initial;
  display:grid;
  align-items:var(--pc-inline-grid-align-items);
}
@media (min-width: 30.625em) {
  .Polaris-InlineGrid{
    gap: var(
        --pc-inline-grid-gap-sm,
        var(--pc-inline-grid-gap-xs)
      );
}
}
@media (min-width: 48em) {
  .Polaris-InlineGrid{
    gap: var(
        --pc-inline-grid-gap-md,
        var(
          --pc-inline-grid-gap-sm,
          var(--pc-inline-grid-gap-xs)
        )
      );
}
}
@media (min-width: 65em) {
  .Polaris-InlineGrid{
    gap: var(
        --pc-inline-grid-gap-lg,
        var(
          --pc-inline-grid-gap-md,
          var(
            --pc-inline-grid-gap-sm,
            var(--pc-inline-grid-gap-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
  .Polaris-InlineGrid{
    gap: var(
        --pc-inline-grid-gap-xl,
        var(
          --pc-inline-grid-gap-lg,
          var(
            --pc-inline-grid-gap-md,
            var(
              --pc-inline-grid-gap-sm,
              var(--pc-inline-grid-gap-xs)
            )
          )
        )
      );
}
}
@media (min-width: 30.625em) {
  .Polaris-InlineGrid{
    grid-template-columns: var(
        --pc-inline-grid-grid-template-columns-sm,
        var(--pc-inline-grid-grid-template-columns-xs)
      );
}
}
@media (min-width: 48em) {
  .Polaris-InlineGrid{
    grid-template-columns: var(
        --pc-inline-grid-grid-template-columns-md,
        var(
          --pc-inline-grid-grid-template-columns-sm,
          var(--pc-inline-grid-grid-template-columns-xs)
        )
      );
}
}
@media (min-width: 65em) {
  .Polaris-InlineGrid{
    grid-template-columns: var(
        --pc-inline-grid-grid-template-columns-lg,
        var(
          --pc-inline-grid-grid-template-columns-md,
          var(
            --pc-inline-grid-grid-template-columns-sm,
            var(--pc-inline-grid-grid-template-columns-xs)
          )
        )
      );
}
}
@media (min-width: 90em) {
  .Polaris-InlineGrid{
    grid-template-columns: var(
        --pc-inline-grid-grid-template-columns-xl,
        var(
          --pc-inline-grid-grid-template-columns-lg,
          var(
            --pc-inline-grid-grid-template-columns-md,
            var(
              --pc-inline-grid-grid-template-columns-sm,
              var(--pc-inline-grid-grid-template-columns-xs)
            )
          )
        )
      );
}
}



  .Polaris-Pagination button{
    border:none !important;
    box-shadow:none !important;
    background-color:var(--p-color-bg-fill-tertiary);
  }

.Polaris-Pagination button:hover{
      background-color:var(--p-color-bg-fill-tertiary-hover);
    }

.Polaris-Pagination button:active{
      box-shadow:var(--p-shadow-inset-200) !important;
    }

.Polaris-Pagination button:active,
    .Polaris-Pagination button:focus{
      background-color:var(--p-color-bg-fill-tertiary-active);
    }

.Polaris-Pagination.Polaris-Pagination--table{
    border-top:0.0625rem solid var(--p-color-border);
  }

.Polaris-Pagination.Polaris-Pagination--table button{
      --button-min-height:var(--p-height-700);
      background-color:var(--p-color-bg-surface-secondary-selected);
      min-height:var(--button-min-height);
      min-width:var(--button-min-height);
      height:var(--button-min-height);
      width:var(--button-min-height);
      display:flex;
      padding:unset;
    }

.Polaris-Pagination.Polaris-Pagination--table button:hover{
        background-color:var(--p-color-bg-fill-tertiary-hover);
      }

.Polaris-Pagination.Polaris-Pagination--table button:hover svg{
          fill:var(--p-color-icon-hover);
        }

.Polaris-Pagination.Polaris-Pagination--table button:active,
      .Polaris-Pagination.Polaris-Pagination--table button:focus{
        background-color:var(--p-color-bg-fill-tertiary-active);
      }

.Polaris-Pagination.Polaris-Pagination--table button:active svg, .Polaris-Pagination.Polaris-Pagination--table button:focus svg{
          fill:var(--p-color-icon-active);
        }

.Polaris-Pagination.Polaris-Pagination--table button:disabled svg{
          fill:var(--p-color-icon-disabled);
        }

.Polaris-Pagination__TablePaginationActions{
  display:flex;
  gap:var(--p-space-025);
  align-items:center;
  justify-content:center;
}


.Polaris-DataTable{
  --pc-data-table-first-column-width:9.0625rem;
  position:relative;
  max-width:100vw;
  background-color:var(--p-color-bg-surface);
  border-radius:0;
  overflow:hidden;
}

@media (min-width: 30.625em){

.Polaris-DataTable{
    border-radius:var(--p-border-radius-300);
}
  }

.Polaris-DataTable--condensed .Polaris-DataTable__Navigation{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:var(--p-space-400) var(--p-space-300);
  }

@media (min-width: 48em){

.Polaris-DataTable--condensed .Polaris-DataTable__Navigation{
      justify-content:flex-end;
  }
    }

.Polaris-DataTable__Navigation{
  display:none;
}

.Polaris-DataTable__Pip{
  height:0.375rem;
  width:0.375rem;
  background:var(--p-color-icon-secondary);
  border-radius:var(--p-border-radius-100);
}

.Polaris-DataTable__Pip:not(:last-of-type){
    margin-right:var(--p-space-100);
  }

.Polaris-DataTable__Pip:first-of-type{
    margin-left:var(--p-space-100);
  }

.Polaris-DataTable__Pip:last-of-type{
    margin-right:var(--p-space-100);
  }

.Polaris-DataTable__Pip--visible{
  background:var(--p-color-icon);
}

.Polaris-DataTable__ScrollContainer{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  background-color:inherit;
}

.Polaris-DataTable__Table{
  width:100%;
  border-spacing:0;
}

.Polaris-DataTable__TableRow + .Polaris-DataTable__TableRow .Polaris-DataTable__Cell{
    border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
  }

.Polaris-DataTable__Cell{
  font-weight:var(--p-font-weight-regular);
  color:var(--p-color-text);
  white-space:nowrap;
  text-align:left;
  transition:background-color var(--p-motion-duration-200) var(--p-motion-ease-in-out);

  padding:var(--p-space-200) var(--p-space-150);
}

.Polaris-DataTable__Cell:first-child{
    padding-left:var(--p-space-300);
  }

.Polaris-DataTable__Cell:last-child{
    padding-right:var(--p-space-300);
  }

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell{
    padding:var(--p-space-150);
  }

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell:first-child{
      padding-left:var(--p-space-300);
    }

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell:last-child{
      padding-right:var(--p-space-300);
    }

.Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell,
  .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell,
  .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell,
  .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell{
    background:none;
  }

.Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell,
  .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell,
  .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell,
  .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell{
    background:var(--p-color-bg-surface-secondary);
  }

.Polaris-DataTable__Cell--separate::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  border-right:var(--p-border-width-025) solid var(--p-color-border);
}

.Polaris-DataTable__Cell--firstColumn{
  text-align:left;
  white-space:normal;
}

.Polaris-DataTable__Cell--numeric{
  text-align:right;
}

.Polaris-DataTable__Cell--truncated{
  white-space:nowrap;
  overflow-x:hidden;
  text-overflow:ellipsis;
  max-width:var(--pc-data-table-first-column-width);
}

.Polaris-DataTable__Cell--header{
  font-weight:var(--p-font-weight-regular);
  color:var(--p-color-text);
  border-bottom:var(--p-border-width-025) solid var(--p-color-border);
  border-top:0;
  padding-top:var(--p-space-300);
  padding-bottom:var(--p-space-300);
}

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--header{
    font-weight:var(--p-font-weight-regular);
  }

.Polaris-DataTable__Cell--sortable{
  padding:0;
}

.Polaris-DataTable__Cell--sortable:first-child{
    padding-left:var(--p-space-200);
  }

.Polaris-DataTable__Cell--sortable:last-child{
    padding-right:var(--p-space-200);
  }

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--sortable{
    padding:0;
  }

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--sortable:first-child{
      padding-left:var(--p-space-200);
    }

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--sortable:last-child{
      padding-right:var(--p-space-200);
    }

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--sortable .Polaris-DataTable__Heading--left{
    padding-right:0;
    padding-left:var(--p-space-100);
  }

.Polaris-DataTable__Cell--verticalAlignTop{
  vertical-align:top;
}

.Polaris-DataTable__Cell--verticalAlignBottom{
  vertical-align:bottom;
}

.Polaris-DataTable__Cell--verticalAlignMiddle{
  vertical-align:middle;
}

.Polaris-DataTable__Cell--verticalAlignBaseline{
  vertical-align:baseline;
}

@media (min-width: 48em){

.Polaris-DataTable--hoverable .Polaris-DataTable__Cell--hovered{
      background:var(--p-color-bg-surface-hover);
  }
    }

.Polaris-DataTable__Icon{
  display:flex;
  align-self:flex-end;
  opacity:0;
  transition:opacity var(--p-motion-duration-200) var(--p-motion-ease);
}

.Polaris-DataTable__Heading{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  position: relative;
  position:relative;
  display:inline-flex;
  justify-content:flex-end;
  align-items:baseline;
  color:var(--p-color-text);
  transition:color var(--p-motion-duration-200) var(--p-motion-ease);
  cursor:pointer;
  margin:0.1875rem;
  padding:0.5625rem 0.1875rem;
}

.Polaris-DataTable__Heading:focus{
    outline:none;
  }

.Polaris-DataTable__Heading::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-DataTable__Heading svg{
    fill:var(--p-color-icon-disabled);
  }

.Polaris-DataTable__StickyHeaderEnabled [data-sticky-active] .Polaris-DataTable__Heading{
    visibility:hidden;
  }

.Polaris-DataTable__StickyHeaderEnabled [data-sticky-active] .Polaris-DataTable__StickyHeaderWrapper .Polaris-DataTable__Heading{
    visibility:visible;
  }

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Heading{
    margin:0.1875rem;
    padding:0.1875rem;
  }

.Polaris-DataTable__Heading:hover .Polaris-DataTable__Icon{
      opacity:1;
    }

.Polaris-DataTable__Heading:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-DataTable__Heading:focus-visible:not(:active) .Polaris-DataTable__Icon{
      opacity:1;
    }

.Polaris-DataTable__Heading:focus-visible:not(:active) .Polaris-DataTable__Icon svg{
        fill:var(--p-color-icon-disabled);
      }

.Polaris-DataTable__Heading--left{
  justify-content:flex-start;
  flex-direction:row-reverse;
}

.Polaris-DataTable__Cell--sorted .Polaris-DataTable__Icon{
    opacity:1;
  }

.Polaris-DataTable__Cell--sorted .Polaris-DataTable__Icon svg{
      fill:var(--p-color-icon);
    }

.Polaris-DataTable__Cell--sorted:hover svg{
    fill:var(--p-color-icon);
  }

.Polaris-DataTable__Cell--sorted .Polaris-DataTable__Heading:focus:not(:active) svg{
      fill:var(--p-color-icon);
    }

.Polaris-DataTable__Cell--total{
  font-weight:var(--p-font-weight-semibold);
  background:var(--p-color-bg-surface-secondary);
  border-bottom:var(--p-border-width-025) solid var(--p-color-border);
}

.Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotals .Polaris-DataTable__Cell--total{
    background:var(--p-color-bg-surface-secondary);
  }

.Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotals.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__Cell--total,
  .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__Cell--total{
    background:none;
  }

.Polaris-DataTable--cellTotalFooter{
  border-top:var(--p-border-width-025) solid var(--p-color-border);
  border-bottom:none;
}

.Polaris-DataTable__Footer{
  padding:var(--p-space-200) var(--p-space-300);
  background:var(--p-color-bg-surface-secondary);
  color:var(--p-color-text-secondary);
  text-align:center;
  border-top:var(--p-border-width-025) solid var(--p-color-border);
}

.Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Footer{
    padding:var(--p-space-150) var(--p-space-300);
  }

.Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__Footer{
    background:none;
  }

.Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderWrapper{
    position:relative;
    top:0;
    left:0;
    right:0;
    visibility:hidden;
    z-index:var(--p-z-index-1);
  }

.Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner{
    position:absolute;
    display:flex;
    flex-direction:column;
    width:100%;
    overflow:hidden;
    border-spacing:0;
  }

.Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner:not(.Polaris-DataTable__StickyHeaderInner--isSticky){
      top:-624.9375rem;
      left:-624.9375rem;
    }

.Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable{
    border-collapse:collapse;
    display:block;
    overflow-x:auto;
    width:100%;
    scrollbar-width:none;
  }

.Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable::-webkit-scrollbar{
      -webkit-appearance:none;
              appearance:none;
      height:0;
      width:0;
    }

.Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable .Polaris-DataTable__FixedFirstColumn{
      bottom:0;
      top:auto;
      padding-left:var(--p-space-300);
    }

.Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyTableHeadingsRow{
    background-color:var(--p-color-bg-surface);
  }

.Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner--isSticky{
    visibility:visible;
    background-color:var(--p-color-bg-surface);
    box-shadow:var(--p-shadow-100);
  }

.Polaris-DataTable__FixedFirstColumn{
  position:absolute;
  background:inherit;
  z-index:3;
  border-spacing:0;
  top:0;
  left:0;
}

@media (max-width: 47.9975em){

.Polaris-DataTable__FixedFirstColumn{
    z-index:1;
}
  }

.Polaris-DataTable__TooltipContent{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}


.Polaris-DatePicker{
  --pc-date-picker-range-end-border-radius:var(--p-border-radius-200);
  position:relative;
}

.Polaris-DatePicker__MonthLayout{
  display:flex;
  flex-wrap:wrap;
  margin-top:calc(var(--p-space-400)*-1);
  margin-left:calc(var(--p-space-400)*-1);
}

.Polaris-DatePicker__MonthContainer{
  flex:1 1 14.375rem;
  margin-top:var(--p-space-400);
  margin-left:var(--p-space-400);
  max-width:calc(100% - var(--p-space-400));
  min-width:14.375rem;
}

.Polaris-DatePicker__Month{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  border:none;
  border-spacing:0;
}

.Polaris-DatePicker__DayCell{
  width:14.28571%;
  background:transparent;
  margin:0;
  padding:0;
  border-radius:var(--p-border-radius-100);
}

.Polaris-DatePicker__DayCell--inRange{
  border-radius:0;
}

.Polaris-DatePicker__Day{
  display:block;
  height:100%;
  width:100%;
  margin:0;
  padding:var(--p-space-200);
  background:transparent;
  border:none;
  border-radius:var(--p-border-radius-200);
  outline:none;
  color:var(--p-color-text);
  cursor:pointer;
}

.Polaris-DatePicker__Day:hover{
    background:var(--p-color-bg-fill-brand-hover);
    color:var(--p-color-text-brand-on-bg-fill);
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-DatePicker__Day{
  position: relative;
}

.Polaris-DatePicker__Day::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-DatePicker__Day:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-DatePicker__Day--inRange{
  background:var(--p-color-bg-surface-brand-selected);
  border-radius:0;
}

@media (-ms-high-contrast: active){

.Polaris-DatePicker__Day--inRange{
    -ms-high-contrast-adjust:none;
    background-color:Highlight;
    color:HighlightText;
}

    .Polaris-DatePicker__Day--inRange:hover{
      background-color:HighlightText;
      color:Highlight;
      outline:var(--p-border-width-050) solid Highlight;
    }
  }

.Polaris-DatePicker__Day--selected{
  background:var(--p-color-bg-fill-brand-selected);
  color:var(--p-color-text-brand-on-bg-fill);
}

@media (-ms-high-contrast: active){

.Polaris-DatePicker__Day--selected{
    -ms-high-contrast-adjust:none;
    background-color:Highlight;
    color:HighlightText;
}

    .Polaris-DatePicker__Day--selected:hover{
      background-color:HighlightText;
      color:Highlight;
      outline:var(--p-border-width-050) solid Highlight;
    }
  }

.Polaris-DatePicker__Day--disabled{
  background-color:transparent;
  color:var(--p-color-text-disabled);
}

.Polaris-DatePicker__Day--disabled:hover{
    background-color:transparent;
    color:var(--p-color-text-disabled);
  }

@media (-ms-high-contrast){

.Polaris-DatePicker__Day--disabled{
    -ms-high-contrast-adjust:none;
    color:grayText;
}

    .Polaris-DatePicker__Day--disabled:hover{
      color:grayText;
      outline:none;
    }
  }

.Polaris-DatePicker__Day--disabled:focus::after{
    content:none;
  }

.Polaris-DatePicker__EmptyDayCell{
  width:14.28571%;
  margin:0;
  padding:0;
}

.Polaris-DatePicker__Weekday{
  padding:var(--p-space-200);
  background:transparent;
}

.Polaris-DatePicker__Header{
  position:absolute;
  top:var(--p-space-400);
  display:flex;
  justify-content:space-between;
  width:100%;
}

.Polaris-DatePicker__Title{
  flex:1 1 auto;
  padding-bottom:var(--p-space-100);
}

.Polaris-DatePicker__Day--firstInRange{
  border-radius:var(--p-border-radius-200);
}

.Polaris-DatePicker__Day--firstInRange.Polaris-DatePicker__Day--hasRange,
  .Polaris-DatePicker__Day--firstInRange.Polaris-DatePicker__Day--hoverRight{
    border-radius:var(--pc-date-picker-range-end-border-radius) 0 0 var(--pc-date-picker-range-end-border-radius);
  }

.Polaris-DatePicker__Day--firstInRange.Polaris-DatePicker__Day--hasRange::after, .Polaris-DatePicker__Day--firstInRange.Polaris-DatePicker__Day--hoverRight::after{
      border-radius:var(--pc-date-picker-range-end-border-radius) 0 0 var(--pc-date-picker-range-end-border-radius);
    }

.Polaris-DatePicker__Day--lastInRange{
  border-radius:0 var(--pc-date-picker-range-end-border-radius) var(--pc-date-picker-range-end-border-radius) 0;
}

.Polaris-DatePicker__Day--lastInRange::after{
    border-radius:0 var(--pc-date-picker-range-end-border-radius) var(--pc-date-picker-range-end-border-radius) 0;
  }

.Polaris-DatePicker__Week{
  margin-bottom:var(--p-space-050);
}

.Polaris-DatePicker__Week > .Polaris-DatePicker__Day--inRange:first-child:not(.Polaris-DatePicker__Day--firstInRange):not(.Polaris-DatePicker__Day--lastInRange){
    border-radius:var(--p-border-radius-100) 0 0 var(--p-border-radius-100);
  }

.Polaris-DatePicker__Week > .Polaris-DatePicker__Day--inRange:last-child:not(.Polaris-DatePicker__Day--firstInRange):not(.Polaris-DatePicker__Day--lastInRange){
    border-radius:0 var(--p-border-radius-100) var(--p-border-radius-100) 0;
  }

.Polaris-DatePicker__Day--inRange::after, .Polaris-DatePicker__Day--inRange:not(:hover) + .Polaris-DatePicker__Day::after{
    border-radius:0 var(--pc-date-picker-range-end-border-radius) var(--pc-date-picker-range-end-border-radius) 0;
  }


.Polaris-DescriptionList{
  margin:0;
  padding:0;
  word-break:break-word;
}

@media (min-width: 30.625em){

.Polaris-DescriptionList{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
}
  }

.Polaris-DescriptionList__Term{
  font-weight:var(--p-font-weight-semibold);
  padding:var(--p-space-400) 0 var(--p-space-200);
}

.Polaris-DescriptionList--spacingTight .Polaris-DescriptionList__Term{
    padding:var(--p-space-200) 0 var(--p-space-100);
  }

@media (min-width: 30.625em){

.Polaris-DescriptionList__Term{
    flex:0 1 25%;
    padding:var(--p-space-400) var(--p-space-400) var(--p-space-400) 0;
}

    .Polaris-DescriptionList--spacingTight .Polaris-DescriptionList__Term{
      padding:var(--p-space-200) var(--p-space-200) var(--p-space-200) 0;
    }
    .Polaris-DescriptionList__Description + .Polaris-DescriptionList__Term + .Polaris-DescriptionList__Description{
      border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
    }
  }

.Polaris-DescriptionList__Description{
  margin-left:0;
  padding:0 0 var(--p-space-400);
}

.Polaris-DescriptionList--spacingTight .Polaris-DescriptionList__Description{
    padding:0 0 var(--p-space-200);
  }

.Polaris-DescriptionList__Description + .Polaris-DescriptionList__Term{
    border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
  }

@media (min-width: 30.625em){

.Polaris-DescriptionList__Description{
    flex:1 1 51%;
    padding:var(--p-space-400) 0;
}

    .Polaris-DescriptionList--spacingTight .Polaris-DescriptionList__Description{
      padding:var(--p-space-200) 0;
    }
    .Polaris-DescriptionList__Description + .Polaris-DescriptionList__Term + .Polaris-DescriptionList__Description{
      border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
    }
  }


.Polaris-Divider{
  border:0;
  margin:0;
}


.Polaris-DropZone-FileUpload{
  padding:var(--p-space-300);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}

.Polaris-DropZone-FileUpload--large{
  padding:var(--p-space-800);
}

.Polaris-DropZone-FileUpload--small{
  padding:var(--p-space-200);
}

.Polaris-DropZone-FileUpload img{
  vertical-align:bottom;
}

.Polaris-DropZone-FileUpload__ActionTitle{
  color:var(--p-color-text-emphasis);
  text-decoration:none;
}

.Polaris-DropZone-FileUpload__ActionTitle:not(.Polaris-DropZone-FileUpload__ActionTitle--disabled){
    cursor:pointer;
  }

.Polaris-DropZone-FileUpload__ActionTitle:not(.Polaris-DropZone-FileUpload__ActionTitle--disabled):hover,
    .Polaris-DropZone-FileUpload__ActionTitle:not(.Polaris-DropZone-FileUpload__ActionTitle--disabled):active{
      color:var(--p-color-text-emphasis-active);
      text-decoration:underline;
    }

.Polaris-DropZone-FileUpload__ActionTitle--focused{
  text-decoration:underline;
}

.Polaris-DropZone-FileUpload__ActionTitle--disabled{
  color:var(--p-color-text-disabled);
}

.Polaris-DropZone-FileUpload__UploadIcon{
  fill:var(--p-color-icon);
}

.Polaris-DropZone-FileUpload__UploadIcon.Polaris-DropZone-FileUpload--disabled{
    fill:var(--p-color-icon-disabled);
  }


.Polaris-DropZone{
  --pc-drop-zone-outline:29;
  --pc-drop-zone-overlay:30;
  --pc-drop-zone-border-style:dashed;
  position:relative;
  display:flex;
  justify-content:center;
  background-color:var(--p-color-input-bg-surface);
  border-radius:var(--p-border-radius-200);
}

.Polaris-DropZone::after{
    content:'';
    position:absolute;
    z-index:var(--pc-drop-zone-outline);
    top:0;
    right:0;
    bottom:0;
    left:0;
    border:var(--p-border-width-0165) var(--pc-drop-zone-border-style) transparent;
    border-radius:var(--p-border-radius-200);
    pointer-events:none;
  }

.Polaris-DropZone:not(.Polaris-DropZone--focused)::after{
      top:0;
      left:0;
      right:0;
      bottom:0;
      opacity:1;
      transform:scale(1);
      border:var(--p-border-width-025) var(--pc-drop-zone-border-style) transparent;
    }

.Polaris-DropZone:hover{
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-DropZone.Polaris-DropZone--noOutline{
    background-color:transparent;
  }

.Polaris-DropZone--hasOutline{
  padding:var(--p-space-025);
}

.Polaris-DropZone--hasOutline:not(.Polaris-DropZone--isDisabled)::after{
      border-width:var(--p-border-width-0165);
      border-color:var(--p-color-input-border);
    }

.Polaris-DropZone--hasOutline:not(.Polaris-DropZone--isDisabled):hover{
      cursor:pointer;
      background-color:var(--p-color-input-bg-surface-hover);
    }

.Polaris-DropZone--hasOutline:not(.Polaris-DropZone--isDisabled):hover::after{
        border-color:var(--p-color-input-border-hover);
      }

.Polaris-DropZone--isDragging:not(.Polaris-DropZone--isDisabled){
    background-color:var(--p-color-bg-surface-hover);
  }

.Polaris-DropZone--isDisabled{
  cursor:not-allowed;
  background-color:var(--p-color-bg-surface-disabled);
  color:var(--p-color-text-disabled);
}

.Polaris-DropZone--isDisabled::after{
    border-color:var(--p-color-border-disabled);
  }

.Polaris-DropZone--sizeLarge{
  min-height:7.5rem;
}

.Polaris-DropZone--sizeMedium{
  min-height:6.25rem;
  align-items:center;
}

.Polaris-DropZone--sizeSmall{
  padding:0;
  align-items:center;
  min-height:2.5rem;
}

.Polaris-DropZone--sizeSmall::before{
    content:'';
    padding-top:100%;
  }

.Polaris-DropZone--measuring{
  visibility:hidden;
  min-height:0;
}

.Polaris-DropZone__Container{
  position: relative;
  flex:1 1;
}

.Polaris-DropZone__Container::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  right: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  bottom: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  left: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 calc(var(--p-border-width-025)*-1 + -0.0625rem) var(--p-color-border-focus);
  border-radius: var(--p-border-radius-200);
}

.Polaris-DropZone__Overlay{
  position:absolute;
  border-radius:var(--p-border-radius-200);
  z-index:var(--pc-drop-zone-overlay);
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:var(--p-space-400);
  border:var(--p-border-width-025) solid var(--p-color-input-border-active);
  text-align:center;
  color:var(--p-color-text);
  background-color:var(--p-color-input-bg-surface-active);
  pointer-events:none;
}

.Polaris-DropZone--sizeSmall .Polaris-DropZone__Overlay{
    padding:0;
  }

.Polaris-DropZone--hasError > .Polaris-DropZone__Overlay{
  border-color:var(--p-color-border-critical-secondary);
  color:var(--p-color-text-critical);
  border-style:var(--pc-drop-zone-border-style);
  border-width:var(--p-border-width-0165);
  background-color:var(--p-color-bg-surface-critical);
}

.Polaris-DropZone--focused:not(.Polaris-DropZone--isDisabled) .Polaris-DropZone__Container::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}


.Polaris-EmptyState__ImageContainer{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.Polaris-EmptyState__Image{
  opacity:0;
  transition:opacity var(--p-motion-duration-150) var(--p-motion-ease);
  z-index:var(--p-z-index-1);
}

.Polaris-EmptyState__Image.Polaris-EmptyState--loaded{
    opacity:1;
  }

@media (min-width: 48em){

.Polaris-EmptyState--imageContained{
    position:initial;
    width:100%;
}
  }

.Polaris-EmptyState__SkeletonImageContainer{
  --pc-empty-state-skeleton-image-container-size:14.125rem;
  height:var(--pc-empty-state-skeleton-image-container-size);
  width:var(--pc-empty-state-skeleton-image-container-size);
  display:flex;
  align-items:center;
  justify-content:center;
}

.Polaris-EmptyState__SkeletonImage{
  position:absolute;
  z-index:var(--p-z-index-0);
  --pc-empty-state-skeleton-image-size:9.0625rem;
  height:var(--pc-empty-state-skeleton-image-size);
  width:var(--pc-empty-state-skeleton-image-size);
  background-color:var(--p-color-bg-fill-secondary);
  border-radius:var(--p-border-radius-full);
  opacity:1;
  transition:opacity var(--p-motion-duration-500) var(--p-motion-ease);
}

.Polaris-EmptyState__SkeletonImage.Polaris-EmptyState--loaded{
    opacity:0;
  }

@media screen and (-ms-high-contrast: active){

.Polaris-EmptyState__SkeletonImage{
    background-color:grayText;
}
  }


.Polaris-Truncate{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}


.Polaris-ExceptionList{
  margin:0;
  padding:0;
  list-style:none;
}

.Polaris-ExceptionList__Item{
  position:relative;
  padding-left:var(--p-space-600);
  color:var(--p-color-text-secondary);
}

.Polaris-ExceptionList__Item + .Polaris-ExceptionList__Item{
    margin-top:var(--p-space-100);
  }

.Polaris-ExceptionList__Icon{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:var(--p-space-500);
  height:var(--p-space-500);
  margin-right:var(--p-space-100);
}

.Polaris-ExceptionList__Icon svg{
    fill:var(--p-color-icon-secondary);
  }

.Polaris-ExceptionList--statusWarning .Polaris-ExceptionList__Icon svg{
    fill:var(--p-color-text-caution);
  }

.Polaris-ExceptionList--statusCritical .Polaris-ExceptionList__Icon svg{
    fill:var(--p-color-text-critical);
  }

.Polaris-ExceptionList__Bullet{
  width:0.375rem;
  height:0.375rem;
  border-radius:var(--p-border-radius-full);
  background-color:var(--p-color-icon-secondary);
}

.Polaris-ExceptionList--statusWarning .Polaris-ExceptionList__Bullet{
    background-color:var(--p-color-text-caution);
  }

.Polaris-ExceptionList--statusCritical .Polaris-ExceptionList__Bullet{
    background-color:var(--p-color-text-critical);
  }

.Polaris-ExceptionList__Title + .Polaris-ExceptionList__Description::before{
    content:'–';
    margin:0 var(--p-space-100);
  }

.Polaris-ExceptionList--statusWarning .Polaris-ExceptionList__Title,
  .Polaris-ExceptionList--statusCritical .Polaris-ExceptionList__Title{
    font-weight:var(--p-font-weight-medium);
  }

.Polaris-ExceptionList--statusWarning .Polaris-ExceptionList__Title{
    color:var(--p-color-text-caution);
  }

.Polaris-ExceptionList--statusCritical .Polaris-ExceptionList__Title{
    color:var(--p-color-text-critical);
  }


.Polaris-Filters-FilterPill__FilterButton{
  background:var(--p-color-bg-surface);
  border-radius:var(--p-border-radius-200);
  border:var(--p-color-border) dashed var(--p-border-width-025);
  cursor:pointer;
  color:var(--p-color-text);
  position: relative;
}

.Polaris-Filters-FilterPill__FilterButton::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  right: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  bottom: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  left: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 calc(var(--p-border-width-025)*-1 + -0.0625rem) var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Filters-FilterPill__FilterButton.Polaris-Filters-FilterPill--focusedFilterButton:focus-within:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Filters-FilterPill__FilterButton:hover,
  .Polaris-Filters-FilterPill__FilterButton:focus,
  .Polaris-Filters-FilterPill__FilterButton:active{
    background:var(--p-color-bg-surface-hover);
    border-color:var(--p-color-border);
  }

.Polaris-Filters-FilterPill__FilterButton:hover path, .Polaris-Filters-FilterPill__FilterButton:focus path, .Polaris-Filters-FilterPill__FilterButton:active path{
      fill:var(--p-color-icon-hover);
    }

.Polaris-Filters-FilterPill__FilterButton:hover,
  .Polaris-Filters-FilterPill__FilterButton:active{
    border-style:solid;
  }

.Polaris-Filters-FilterPill__FilterButton:hover,
  .Polaris-Filters-FilterPill__FilterButton:focus{
    background:transparent;
  }

.Polaris-Filters-FilterPill__FilterButton:active{
    background:var(--p-color-bg-surface-secondary);
  }

.Polaris-Filters-FilterPill__FilterButton.Polaris-Filters-FilterPill__ActiveFilterButton{
    background:var(--p-color-bg-surface);
    border-style:solid;
  }

.Polaris-Filters-FilterPill__FilterButton.Polaris-Filters-FilterPill__ActiveFilterButton:active{
      background:var(--p-color-bg-surface-secondary);
    }

.Polaris-Filters-FilterPill__FilterButton::after{
    border-radius:var(--p-border-radius-200);
  }

.Polaris-Filters-FilterPill__PlainButton{
  background:none;
  color:inherit;
  border:none;
  padding:0;
  font:inherit;
  cursor:inherit;
  outline:inherit;
}

.Polaris-Filters-FilterPill__PlainButton path{
    fill:var(--p-color-icon);
  }

.Polaris-Filters-FilterPill__PlainButton[aria-disabled='true'] path{
      fill:var(--p-color-icon-disabled);
    }

.Polaris-Filters-FilterPill__ToggleButton{
  padding:0 var(--p-space-200) 0 var(--p-space-300);
  height:1.625rem;
}

@media (min-width: 48em){

.Polaris-Filters-FilterPill__ToggleButton{
    padding:0 var(--p-space-100) 0 var(--p-space-200);
    height:1.375rem;
}
  }

.Polaris-Filters-FilterPill__ActiveFilterButton .Polaris-Filters-FilterPill__ToggleButton{
  padding-right:var(--p-space-050);
}

@media (min-width: 48em){

.Polaris-Filters-FilterPill__ActiveFilterButton .Polaris-Filters-FilterPill__ToggleButton{
    padding-right:0;
}
  }

.Polaris-Filters-FilterPill--clearButton{
  position: relative;
  margin-right:var(--p-space-200);
}

.Polaris-Filters-FilterPill--clearButton::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

@media (min-width: 48em){

.Polaris-Filters-FilterPill--clearButton{
    margin-right:var(--p-space-100);
}
  }

.Polaris-Filters-FilterPill--clearButton:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

@media (min-width: 48em){

.Polaris-Filters-FilterPill__IconWrapper{
    scale:0.8;
}
  }

.Polaris-Filters-FilterPill__PopoverWrapper{
  min-width:11.5625rem;
  max-width:18.75rem;
  word-break:break-word;
}

.Polaris-Filters-FilterPill__ClearButtonWrapper button{
    min-height:0;
    padding:0;
    margin:0;
  }


.Polaris-Filters__Container{
  position:relative;
  z-index:30;
  border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary);
  border-top-left-radius:var(--p-border-radius-200);
  border-top-right-radius:var(--p-border-radius-200);
  background:var(--p-color-bg-surface);
}

@media (max-width: 30.6225em){
  .Polaris-Filters__Container{
    border-top-left-radius:0;
    border-top-right-radius:0;
  }
}

.Polaris-Filters__SearchField{
  flex:1 1;
}

.Polaris-Filters__FiltersWrapper{
  border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary);
  height:3.3125rem;
  overflow:hidden;
}

@media (max-width: 30.6225em){

.Polaris-Filters__FiltersWrapper{
    background:var(--p-color-bg-surface);
}
  }

@media (min-width: 48em){

.Polaris-Filters__FiltersWrapper{
    height:auto;
    overflow:visible;
}
  }

.Polaris-Filters--hideQueryField .Polaris-Filters__FiltersWrapper{
  display:flex;
  align-items:center;
}

.Polaris-Filters__FiltersInner{
  overflow:auto;
  white-space:nowrap;
  padding:var(--p-space-300) var(--p-space-200) var(--p-space-500);
}

.Polaris-Filters--hideQueryField .Polaris-Filters__FiltersInner{
  flex:1 1;
  padding:var(--p-space-300);
}

@media (min-width: 48em){
  .Polaris-Filters__FiltersInner{
    overflow:visible;
    flex-wrap:wrap;
    gap:var(--p-space-200);
    padding:0.375rem var(--p-space-200);
  }

  .Polaris-Filters--hideQueryField .Polaris-Filters__FiltersInner{
    flex:1 1;
    padding:0.375rem var(--p-space-200);
  }
}

.Polaris-Filters__AddFilter{
  background:var(--p-color-bg-surface);
  border-radius:var(--p-border-radius-200);
  border:var(--p-color-border) dashed var(--p-border-width-025);
  padding:0 var(--p-space-200) 0 var(--p-space-300);
  height:1.75rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  outline:inherit;
  position: relative;
}

.Polaris-Filters__AddFilter::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  right: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  bottom: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  left: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 calc(var(--p-border-width-025)*-1 + -0.0625rem) var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Filters__AddFilter path{
    fill:var(--p-color-icon);
  }

@media (min-width: 48em){

.Polaris-Filters__AddFilter{
    height:1.5rem;
    padding:0 0.375rem 0 var(--p-space-200);
}
  }

.Polaris-Filters__AddFilter:hover,
  .Polaris-Filters__AddFilter:focus{
    background:transparent;
    border-color:var(--p-color-border-hover);
  }

.Polaris-Filters__AddFilter:hover path, .Polaris-Filters__AddFilter:focus path{
      fill:var(--p-color-icon-hover);
    }

.Polaris-Filters__AddFilter:hover{
    border-style:solid;
  }

.Polaris-Filters__AddFilter:focus{
    outline-offset:var(--p-border-width-050);
  }

.Polaris-Filters__AddFilter:active{
    background:var(--p-color-bg-surface-tertiary);
    border-color:var(--p-color-border-hover);
  }

.Polaris-Filters__AddFilter[aria-disabled='true']{
    background:var(--p-color-bg-fill-disabled);
    border-color:transparent;
    color:var(--p-color-text-disabled);
    cursor:default;
  }

.Polaris-Filters__AddFilter[aria-disabled='true'] path{
      fill:var(--p-color-icon-disabled);
    }

.Polaris-Filters__AddFilter:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Filters__AddFilter::after{
    border-radius:var(--p-border-radius-200);
  }

.Polaris-Filters__AddFilter span{
    margin-right:var(--p-space-050);
  }

@media (min-width: 48em){

.Polaris-Filters__AddFilter span{
      margin-right:var(--p-space-025);
  }
    }

.Polaris-Filters__AddFilter svg{
    width:var(--p-space-500);
  }

@media (min-width: 48em){

.Polaris-Filters__AddFilter svg{
      width:var(--p-space-400);
  }
    }

@media (max-width: 47.9975em){
  .Polaris-Filters__FiltersWrapperWithAddButton{
    position:relative;
  }

    .Polaris-Filters__FiltersWrapperWithAddButton .Polaris-Filters__FiltersInner{
      padding:var(--p-space-200);
      padding-right:0;
    }

  .Polaris-Filters__AddFilterActivatorMultiple{
    position:sticky;
    z-index:var(--p-z-index-1);
    top:0;
    right:0;
    display:flex;
    padding:var(--p-space-100) var(--p-space-400) var(--p-space-100) 0;
    background:var(--p-color-bg-surface);
    margin-left:var(--p-space-200);
  }

    .Polaris-Filters__AddFilterActivatorMultiple::before{
      content:'';
      position:absolute;
      top:0;
      left:-0.75rem;
      width:0.75rem;
      height:100%;
      pointer-events:none;
      background:linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        var(--p-color-bg-surface) 70%,
        var(--p-color-bg-surface) 100%
      );
    }

    .Polaris-Filters__AddFilterActivatorMultiple .Polaris-Filters__AddFilter{
      padding:var(--p-space-300) var(--p-space-200);
    }
      .Polaris-Filters__AddFilterActivatorMultiple .Polaris-Filters__AddFilter span{
        display:none;
      }
}

.Polaris-Filters__FiltersStickyArea{
  position:relative;
  display:flex;
  gap:var(--p-space-100);
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
}

@media (min-width: 48em){

.Polaris-Filters__FiltersStickyArea{
    flex-wrap:wrap;
}
  }

.Polaris-Filters__ClearAll{
  margin-left:var(--p-space-200);
}

@media (max-width: 47.9975em){
  .Polaris-Filters__ClearAll{
    margin-left:0;
    padding-right:var(--p-space-400);
  }

  .Polaris-Filters__MultiplePinnedFilterClearAll{
    transform:translateX(-0.5rem);
    position:relative;
    z-index:var(--p-z-index-1);
    margin-left:0;
    padding-right:var(--p-space-400);
  }
}


.Polaris-FooterHelp{
  display:flex;
  justify-content:var(--pc-footer-help-align);
  margin:var(--p-space-500);
  width:auto;
}


.Polaris-FormLayout__Item{
  --pc-form-layout-item-min-size:13.75rem;
  flex:1 1;
}
.Polaris-FormLayout__Item.Polaris-FormLayout--grouped{
    min-width:var(--pc-form-layout-item-min-size);
  }
@media (min-width: 0em) and (max-width: 30.6225em){
  .Polaris-FormLayout__Item.Polaris-FormLayout--grouped{
      min-width:100%;
  }
    }
.Polaris-FormLayout__Item.Polaris-FormLayout--condensed{
    flex-basis:calc(var(--pc-form-layout-item-min-size)*0.5);
    min-width:calc(var(--pc-form-layout-item-min-size)*0.5);
  }


.Polaris-Frame-Toast{
  display:inline-flex;
  max-width:31.25rem;
  padding:var(--p-space-200) var(--p-space-300);
  border-radius:var(--p-border-radius-100);
  background:var(--p-color-bg-inverse);
  color:var(--p-color-text-inverse);
  margin-bottom:var(--p-space-500);
  box-shadow:var(--p-shadow-500);

  position: relative;

  box-shadow: var(--p-shadow-400);

  border-radius: var(--p-border-radius-200);
}

.Polaris-Frame-Toast::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  box-shadow: var(--p-shadow-bevel-100);
  border-radius: var(--p-border-radius-200);
  pointer-events: none;
  mix-blend-mode: luminosity;
}

@media (min-width: 30.625em){

.Polaris-Frame-Toast{
    padding:var(--p-space-300);
}
  }

@media (forced-colors: active){

.Polaris-Frame-Toast{
    border:var(--p-border-width-050) solid transparent;
}
  }

.Polaris-Frame-Toast__Action{
  margin-left:var(--p-space-400);
  color:var(--p-color-text-inverse);
}

.Polaris-Frame-Toast--error{
  background:var(--p-color-bg-fill-critical);
  color:var(--p-color-text-critical-on-bg-fill);
}

.Polaris-Frame-Toast--error .Polaris-Frame-Toast__CloseButton{
    color:var(--p-color-text-critical-on-bg-fill);
  }

.Polaris-Frame-Toast__LeadingIcon{
  margin-right:var(--p-space-150);
}

.Polaris-Frame-Toast__CloseButton{
  display:flex;
  align-self:center;
  flex-direction:column;
  justify-content:flex-start;
  padding:0;
  border:none;
  -webkit-appearance:none;
          appearance:none;
  background:transparent;
  color:var(--p-color-icon-inverse);
  cursor:pointer;
  margin-left:var(--p-space-200);
}

.Polaris-Frame-Toast__CloseButton:focus{
    outline:none;
  }

.Polaris-Frame-Toast__CloseButton:focus,
  .Polaris-Frame-Toast__CloseButton:hover{
    color:var(--p-color-text-inverse);
  }

.Polaris-Frame-Toast--toneMagic{
  background-color:var(--p-color-bg-fill-magic-secondary);
  color:var(--p-color-text-magic);
}

.Polaris-Frame-Toast--toneMagic .Polaris-Frame-Toast__CloseButton{
    color:var(--p-color-text-magic);
  }

.Polaris-Frame-Toast--toneMagic .Polaris-Frame-Toast__Action{
    color:var(--p-color-text-magic);
  }

.Polaris-Frame-Toast__WithActionOnComponent{
  border:none;
  cursor:pointer;
  padding-right:var(--p-space-500);
}

.Polaris-Frame-Toast__WithActionOnComponent.Polaris-Frame-Toast--toneMagic:focus,
  .Polaris-Frame-Toast__WithActionOnComponent.Polaris-Frame-Toast--toneMagic:hover{
    background-color:var(--p-color-bg-fill-magic-secondary-hover);
  }

.Polaris-Frame-Toast__WithActionOnComponent.Polaris-Frame-Toast--toneMagic:active{
    background-color:var(--p-color-bg-fill-magic-secondary-active);
  }


:root{
  --pc-toast-manager-translate-y-out:9.375rem;
  --pc-toast-manager-translate-y-in:0;
  --pc-toast-manager-scale-in:1;
  --pc-toast-manager-scale-out:0.9;
  --pc-toast-manager-blur-in:0;
  --pc-toast-manager-transition-delay-in:0s;
}

.Polaris-Frame-ToastManager{
  position:fixed;
  z-index:var(--p-z-index-12);
  right:0;
  left:0;
  text-align:center;
  bottom:var(--pc-frame-global-ribbon-height);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.Polaris-Frame-ToastManager__ToastWrapper{
  position:absolute;
  display:inline-flex;
  opacity:0;
  transition:transform var(--p-motion-duration-400) var(--p-motion-ease-out), opacity var(--p-motion-duration-400) var(--p-motion-ease-out);
  transform:translateY(var(--pc-toast-manager-translate-y-out));
}

.Polaris-Frame-ToastManager__ToastWrapper--enter,
.Polaris-Frame-ToastManager__ToastWrapper--exit{
  transition-timing-function:var(--p-motion-ease-in);
  transform:translateY(var(--pc-toast-manager-translate-y-out)) scale(var(--pc-toast-manager-scale-out));
  opacity:0;
}

.Polaris-Frame-ToastManager__ToastWrapper--exit{
  transition-duration:var(--p-motion-duration-200);
}

.Polaris-Frame-ToastManager--toastWrapperEnterDone{
  transform:translateY(var(--pc-toast-manager-translate-y-in)) scale(var(--pc-toast-manager-scale-in));
  filter:blur(var(--pc-toast-manager-blur-in));
  opacity:1;
  transition-delay:var(--pc-toast-manager-transition-delay-in);
}

.Polaris-Frame-ToastManager--toastWrapperHoverable{
  cursor:pointer;
}


.Polaris-Frame-Loading{
  overflow:hidden;
  height:0.1875rem;
  background-color:var(--p-color-bg-surface);
  opacity:1;
}

.Polaris-Frame-Loading__Level{
  width:100%;
  height:100%;
  transform-origin:0;
  background-color:var(--p-color-bg-fill-brand);
  transition:transform var(--p-motion-duration-500) linear;
}

@media screen and (-ms-high-contrast: active){

.Polaris-Frame-Loading__Level{
    background-color:highlight;
}
  }


.Polaris-Modal-Dialog__Container{
  position:fixed;
  z-index:var(--p-z-index-11);
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  pointer-events:none;
}

@media (min-width: 48em){

.Polaris-Modal-Dialog__Container{
    justify-content:center;
}
  }

.Polaris-Modal-Dialog:focus{
  outline:0;
}

.Polaris-Modal-Dialog__Modal{
  --pc-modal-dialog-vertical-spacing:3.75rem;
  pointer-events:initial;
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  flex-direction:column;
  width:100%;
  max-height:calc(100vh - var(--pc-modal-dialog-vertical-spacing));
  background:var(--p-color-bg-surface);
  box-shadow:var(--p-shadow-600);
  overflow:hidden;
}

@media (forced-colors: active){

.Polaris-Modal-Dialog__Modal{
    border:var(--p-border-width-025) solid transparent;
}
  }

@media (max-width: 47.9975em){

.Polaris-Modal-Dialog__Modal{
    bottom:0;
    max-height:100%;
}
  }

@media (min-width: 48em){

.Polaris-Modal-Dialog__Modal{
    position:relative;
    max-width:38.75rem;
    margin:0 auto;
    border-radius:var(--p-border-radius-400);
}
  }

@media (min-width: 48em) and (min-height: 41.25em){

.Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--limitHeight{
        max-height:37.5rem;
  }
      }

@media (min-width: 48em){

.Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeSmall{
      max-width:23.75rem;
  }
    }

@media (min-width: 48em){

.Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeLarge{
      max-width:calc(100% - var(--p-space-1600));
  }
    }

@media (min-width: 65em){

.Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeLarge{
      max-width:61.25rem;
  }
    }

.Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeFullScreen{
    height:100%;
  }

@media (min-width: 48em){

.Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeFullScreen{
      height:unset;
  }
    }

.Polaris-Modal-Dialog--animateFadeUp{
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:transform, opacity;
  opacity:1;
  transform:translateY(0);
  transition:transform var(--p-motion-ease) var(--p-motion-duration-200), opacity var(--p-motion-ease) var(--p-motion-duration-200);
}

.Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--entering,
  .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--exiting,
  .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--exited{
    opacity:0;
    transform:translateY(12.5rem);
  }

.Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--entered{
    opacity:1;
    transform:translateY(0);
  }


.Polaris-Modal-Section{
  flex:0 0 auto;
}

.Polaris-Modal-Section:not(:last-of-type){
    border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary);
  }

.Polaris-Modal-Section--titleHidden{
  padding-right:calc(var(--p-space-1200) + var(--p-space-100) + var(--p-space-100));
}


.Polaris-Modal__Body,
.Polaris-Modal__NoScrollBody{
  flex-grow:1;
}

@media (min-width: 48em){

.Polaris-Modal__Body,
.Polaris-Modal__NoScrollBody{
    flex-grow:unset;
}
  }

.Polaris-Modal__IFrame{
  --pc-modal-frame-small-width:38.75rem;
  display:block;
  width:var(--pc-modal-frame-small-width);
  max-width:100vw;
  border:none;
}

@media (min-width: 48em){

.Polaris-Modal__IFrame{
    max-width:var(--pc-modal-frame-small-width);
}
  }


.Polaris-Frame-ContextualSaveBar{
  --p-color-bg-surface:var(--p-color-bg-inverse);
  --p-color-text:var(--p-color-text-inverse);
  --p-color-bg-surface-hover:var(--p-color-bg-fill-inverse-hover);
  --p-color-bg-surface-secondary-active:var(--p-color-bg-fill-inverse-active);
  display:flex;
  height:var(--pg-top-bar-height);
  background:var(--p-color-bg-inverse);
  box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}

.Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__LogoContainer{
    border-right:none;
  }

.Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ContextControl{
    opacity:0.3;
    pointer-events:none;
  }

@media (forced-colors: active){

.Polaris-Frame-ContextualSaveBar{
    border:var(--p-border-width-025) solid transparent;
}
  }

.Polaris-Frame-ContextualSaveBar__LogoContainer{
  display:none;
}

@media (min-width: 48em){

.Polaris-Frame-ContextualSaveBar__LogoContainer{
    display:flex;
    flex:0 0 var(--pg-layout-width-nav-base);
    align-items:center;
    height:100%;
    padding:0 var(--p-space-500);
    background-color:transparent;
}
  }

.Polaris-Frame-ContextualSaveBar__Contents{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:space-between;
  min-width:0.0625rem;
  max-width:calc(var(--pg-layout-width-primary-max) + var(--pg-layout-width-secondary-max) + var(--pg-layout-width-inner-spacing-base));
  height:100%;
  margin:0 auto;
  padding:0 var(--p-space-400);
}

@media (min-width: 30.625em){

.Polaris-Frame-ContextualSaveBar__Contents{
    padding:0 var(--p-space-500);
}
  }

@media (min-width: 48em){

.Polaris-Frame-ContextualSaveBar__Contents{
    padding:0 var(--p-space-800);
}
  }

.Polaris-Frame-ContextualSaveBar--fullWidth{
  max-width:none;
  padding:0 var(--p-space-400);
}

.Polaris-Frame-ContextualSaveBar__MessageContainer{
  display:flex;
  flex-direction:row;
  gap:var(--p-space-200);
  overflow:hidden;
  margin-right:var(--p-space-200);
}

.Polaris-Frame-ContextualSaveBar__MessageContainer [class*='Polaris-Icon__Svg']{
    fill:var(--p-color-text-inverse);
  }

.Polaris-Frame-ContextualSaveBar__MessageContainer [class*='Polaris-Icon']{
    flex-shrink:0;
  }

.Polaris-Frame-ContextualSaveBar__ActionContainer{
  flex-shrink:0;
}

.Polaris-Frame-ContextualSaveBar__ActionContainer [class*='Polaris-Button--variantPrimary'],
  .Polaris-Frame-ContextualSaveBar__ActionContainer [class*='Button-variantPrimary']{
    --pc-button-color:rgba(48, 48, 48, 1);
    --pc-button-color_disabled:var(--p-color-text-secondary);
    --pc-button-bg:rgba(255, 255, 255, 1);
    --pc-button-bg_hover:rgba(250, 250, 250, 1);
    --pc-button-bg_active:rgba(247, 247, 247, 1);
    --pc-button-bg_pressed:rgba(247, 247, 247, 1);
    --pc-button-bg_disabled:rgba(255, 255, 255, 0.2);
    --pc-button-box-shadow:0 0.0625rem 0 0 rgba(255, 255, 255, 0.48) inset, -0.0625rem 0 0 0 rgba(255, 255, 255, 0.2) inset, 0.0625rem 0 0 0 rgba(255, 255, 255, 0.2) inset, 0 -0.09375rem 0 0 rgba(0, 0, 0, 0.25) inset;
    --pc-button-box-shadow_active:0 0.125rem 0.0625rem 0 rgba(26, 26, 26, 0.2) inset, 0.0625rem 0 0.0625rem 0 rgba(26, 26, 26, 0.12) inset, -0.0625rem 0 0.0625rem 0 rgba(26, 26, 26, 0.12) inset;
  }

.Polaris-Frame-ContextualSaveBar__ActionContainer [class*='Polaris-Button--variantTertiary'],
  .Polaris-Frame-ContextualSaveBar__ActionContainer [class*='Button-variantTertiary']{
    --pc-button-bg:var(--p-color-bg-fill-inverse);
    --pc-button-bg_hover:var(--p-color-bg-fill-inverse-hover);
    --pc-button-bg_active:var(--p-color-bg-fill-inverse-active);
    --pc-button-bg_disabled:var(--pc-button-bg);
    --pc-button-color:var(--p-color-text-inverse);
    --pc-button-color_disabled:var(--p-color-text-secondary);
  }

.Polaris-Frame-ContextualSaveBar__Action{
  margin-left:var(--p-space-200);
}

.Polaris-Frame-ContextualSaveBar__ContextControl{
  display:none;
}

@media (min-width: 48em){

.Polaris-Frame-ContextualSaveBar__ContextControl{
    display:block;
    width:var(--pg-layout-width-nav-base);
}
  }


.Polaris-Frame-CSSAnimation--startFade{
  opacity:0;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:opacity;
  transition:opacity var(--p-motion-duration-300) var(--p-motion-ease-out);
  pointer-events:none;
}

.Polaris-Frame-CSSAnimation--endFade{
  opacity:1;
  pointer-events:auto;
}


.Polaris-Frame{
  --pc-frame-button-size:var(--p-space-800);
  --pc-sidebar-width:calc(22.25rem + var(--p-space-400));
  width:100%;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  background-color:var(--p-color-bg);
}

@media print{

.Polaris-Frame{
    background-color:transparent;
}
  }

@media (min-width: 48em){

.Polaris-Frame{
    width:calc(100% - var(--pc-frame-offset, 0px));
    margin-left:var(--pc-frame-offset);
}
  }

.Polaris-Frame__ScrollbarAlwaysVisible{
  --pc-scrollbar-spacer:var(--p-space-050);
}

.Polaris-Frame__Navigation{
  position:fixed;
  z-index:var(--p-z-index-8);
  top:0;
  left:0;
  display:none;
  flex:0 0 auto;
  align-items:stretch;
  height:100%;
  outline:none;
  transform:translateX(0%);
}

@media print{

.Polaris-Frame__Navigation{
    display:none !important;
}
  }

@media (min-width: 48em){

.Polaris-Frame__Navigation{
    z-index:1;
    left:var(--pc-frame-offset);
    display:flex;
}

    .Polaris-Frame--hasTopBar .Polaris-Frame__Navigation{
      top:var(--pg-top-bar-height);
      height:calc(100% - var(--pg-top-bar-height));
    }
  }

.Polaris-Frame__Navigation:focus{
    outline:none;
  }

.Polaris-Frame__Navigation--enter,
.Polaris-Frame__Navigation--enterActive,
.Polaris-Frame__Navigation--exit,
.Polaris-Frame__Navigation--exitActive{
  display:flex;
}

.Polaris-Frame__Navigation--enter{
  transform:translateX(-100%);
}

.Polaris-Frame__Navigation--enterActive{
  transform:translateX(0%);
  transition:transform var(--p-motion-duration-300) var(--p-motion-ease-out);
}

.Polaris-Frame__Navigation--exit{
  transform:translateX(0%);
}

.Polaris-Frame__Navigation--exitActive{
  transform:translateX(-100%);
  transition:transform var(--p-motion-duration-300) var(--p-motion-ease-out);
}

.Polaris-Frame__NavigationDismiss{
  position: relative;
  position:absolute;
  top:0;
  left:100%;
  width:var(--pc-frame-button-size);
  height:var(--pc-frame-button-size);
  margin:var(--p-space-400);
  padding:0;
  border:none;
  border-radius:var(--p-border-radius-full);
  background:none;
  opacity:0;
  pointer-events:none;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:opacity;
  cursor:pointer;
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease);
}

.Polaris-Frame__NavigationDismiss::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Frame__NavigationDismiss svg{
    fill:var(--p-color-bg-surface);
  }

@media print{

.Polaris-Frame__NavigationDismiss{
    display:none !important;
}
  }

.Polaris-Frame__Navigation--visible .Polaris-Frame__NavigationDismiss{
    pointer-events:all;
    opacity:1;
  }

.Polaris-Frame__NavigationDismiss:focus{
    position:absolute;
    border-radius:var(--p-border-radius-100);
    outline:none;
  }

.Polaris-Frame__NavigationDismiss:focus::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

@media (min-width: 48em){

.Polaris-Frame__NavigationDismiss{
    display:none;
}
  }

.Polaris-Frame__NavigationDismiss:hover{
    background-color:rgba(255, 255, 255, 0.5);
  }

.Polaris-Frame__NavigationDismiss:active{
    background-color:rgba(255, 255, 255, 0.5);
  }

.Polaris-Frame__TopBar{
  position:fixed;
  z-index:var(--p-z-index-4);
  top:0;
  left:0;
  width:100%;
  height:var(--pg-top-bar-height);
}

@media print{

.Polaris-Frame__TopBar{
    display:none !important;
}
  }

@media (min-width: 48em){

.Polaris-Frame__TopBar{
    left:var(--pc-frame-offset);
    width:calc(100% - var(--pc-frame-offset, 0px));
}
  }

.Polaris-Frame__ContextualSaveBar{
  position:fixed;
  z-index:var(--p-z-index-5);
  top:0;
  left:0;
  width:100%;
}

@media (min-width: 48em){

.Polaris-Frame__ContextualSaveBar{
    left:var(--pc-frame-offset);
    width:calc(100% - var(--pc-frame-offset, 0px));
}
  }

.Polaris-Frame__Main{
  flex:1 1;
  display:flex;
  align-items:stretch;
  border-inline-end:var(--p-border-width-025) solid var(--p-color-border);

  min-width:0;
}

@media (min-width: 30.625em){

.Polaris-Frame__Main{
    max-width:calc(100vw - var(--pc-app-provider-scrollbar-width));
}
  }

.Polaris-Frame__Main{
  padding-right: 0;
  padding-right: calc(constant(safe-area-inset-right));
  padding-right: calc(env(safe-area-inset-right));
  padding-left: 0;
  padding-left: calc(constant(safe-area-inset-left));
  padding-left: calc(env(safe-area-inset-left));
  padding-bottom: 0;
  padding-bottom: calc(constant(safe-area-inset-bottom));
  padding-bottom: calc(env(safe-area-inset-bottom));
}

@media (min-width: 48em){
    .Polaris-Frame--hasNav .Polaris-Frame__Main{
      padding-left:var(--pg-layout-width-nav-base);
      padding-left: var(--pg-layout-width-nav-base);
      padding-left: calc(var(--pg-layout-width-nav-base) + constant(safe-area-inset-left));
      padding-left: calc(var(--pg-layout-width-nav-base) + env(safe-area-inset-left));
    }
  }

.Polaris-Frame--hasTopBar .Polaris-Frame__Main{
    padding-top:var(--pg-top-bar-height);
  }

@media print{

.Polaris-Frame--hasTopBar .Polaris-Frame__Main{
      padding-top:0;
  }
    }

@media print{
    .Polaris-Frame--hasNav .Polaris-Frame__Main{
      padding-left:0;
    }
  }

.Polaris-Frame__Content{
  position:relative;
  padding-bottom:var(--pc-frame-global-ribbon-height, 0);
  flex:1 1;
  min-width:0;
  max-width:100%;
}

@media screen and (min-width: 1200px){

.Polaris-Frame--hasSidebar .Polaris-Frame__Content{
      margin-right:var(--pc-sidebar-width);
  }
    }

.Polaris-Frame__GlobalRibbonContainer{
  position:fixed;
  z-index:var(--p-z-index-3);
  bottom:0;
  width:100%;
}

@media (min-width: 48em){

.Polaris-Frame__GlobalRibbonContainer{
    left:var(--pc-frame-offset);
}

    .Polaris-Frame--hasNav .Polaris-Frame__GlobalRibbonContainer{
      left:calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset));
      left: calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset));
      left: calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset) + constant(safe-area-inset-left));
      left: calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset) + env(safe-area-inset-left));
      width:calc(100% - var(--pg-layout-width-nav-base) - var(--pc-frame-offset, 0px));
    }
  }

.Polaris-Frame__LoadingBar{
  position:fixed;
  z-index:var(--p-z-index-6);
  top:0;
  right:0;
  left:0;
}

@media print{

.Polaris-Frame__LoadingBar{
    display:none !important;
}
  }

@media (min-width: 48em){
    .Polaris-Frame--hasNav .Polaris-Frame__LoadingBar{
      left:var(--pc-frame-offset);
    }

    .Polaris-Frame--hasTopBar .Polaris-Frame__LoadingBar{
      z-index:var(--p-z-index-6);
    }
  }

.Polaris-Frame__Skip{
  --pc-frame-skip-vertical-offset:0.625rem;
  position:fixed;
  z-index:var(--p-z-index-9);
  top:var(--pc-frame-skip-vertical-offset);
  left:calc(var(--p-space-200) + var(--pc-frame-offset));
  opacity:0;
  pointer-events:none;
}

.Polaris-Frame__Skip.Polaris-Frame--focused{
    pointer-events:all;
    opacity:1;
  }

.Polaris-Frame__Skip.Polaris-Frame--focused > a::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Frame__Skip > a{
    position: relative;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:1.75rem;
    min-width:1.75rem;
    margin:0;
    padding:var(--p-space-150) var(--p-space-300);
    background:var(--p-color-bg-fill);
    box-shadow:var(--p-shadow-200);
    border-radius:var(--p-border-radius-200);
    color:var(--p-color-text);
    border:none;
    line-height:1;
    text-align:center;
    cursor:pointer;
    -webkit-user-select:none;
            user-select:none;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    position: relative;
    color:var(--p-color-text);
  }

.Polaris-Frame__Skip > a::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  right: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  bottom: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  left: calc(var(--p-border-width-025)*-1 + -0.0625rem);
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 calc(var(--p-border-width-025)*-1 + -0.0625rem) var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Frame__Skip > a svg{
    fill:var(--p-color-icon);
  }

.Polaris-Frame__Skip > a:hover{
    background:var(--p-color-bg-fill-hover);
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-Frame__Skip > a:focus-visible{
    box-shadow:var(--p-shadow-200);
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-025);
  }

.Polaris-Frame__Skip > a:focus-visible::after{
    content:none;
  }

.Polaris-Frame__Skip > a:active::after{
      border:none;
      box-shadow:none;
    }

.Polaris-Frame__Skip > a.Polaris-Frame--pressed{
    background:var(--p-color-bg-fill-selected);
    box-shadow:var(--p-shadow-inset-200);
    color:var(--p-color-text);
    border-color:var(--p-color-border-inverse);
  }

.Polaris-Frame__Skip > a.Polaris-Frame--pressed svg{
      fill:currentColor;
    }

.Polaris-Frame__Skip > a.Polaris-Frame--pressed:hover{
      background:var(--p-color-bg-fill-tertiary-hover);
      box-shadow:var(--p-shadow-inset-200);
    }

.Polaris-Frame__Skip > a.Polaris-Frame--pressed:active{
      background:var(--p-color-bg-fill-tertiary-active);
      box-shadow:var(--p-shadow-inset-200);
    }

@media (-ms-high-contrast: active){

.Polaris-Frame__Skip > a{
    border:var(--p-border-width-025) solid windowText;
  }
  }

.Polaris-Frame__Skip > a::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.125rem;
  right: -0.125rem;
  bottom: -0.125rem;
  left: -0.125rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Frame__Skip > a:focus{
      border-color:none;
      box-shadow:none;
    }


.Polaris-FullscreenBar{
  position:relative;
  display:flex;
  height:var(--pg-top-bar-height);
  box-shadow:var(--p-shadow-100);
  background-color:var(--p-color-bg-surface);
}

.Polaris-FullscreenBar__BackAction{
  display:flex;
  flex:0 1 auto;
  align-items:center;
  padding-left:var(--p-space-400);
  padding-right:var(--p-space-400);
  border-width:0;
  border-right:var(--p-border-width-025) solid var(--p-color-border-secondary);
  background-color:var(--p-color-bg-surface);
  font-weight:var(--p-font-weight-medium);
  cursor:pointer;
}

.Polaris-FullscreenBar__BackAction :first-child{
  margin-right:var(--p-space-150);
}


.Polaris-Grid-Cell{
  --pc-row-xs:initial;
  --pc-row-sm:var(--pc-row-xs);
  --pc-row-md:var(--pc-row-sm);
  --pc-row-lg:var(--pc-row-md);
  --pc-row-xl:var(--pc-row-lg);
  --pc-column-xs:initial;
  --pc-column-sm:var(--pc-column-xs);
  --pc-column-md:var(--pc-column-sm);
  --pc-column-lg:var(--pc-column-md);
  --pc-column-xl:var(--pc-column-lg);
  min-width:0;
  grid-row:var(--pc-row-xs);
  grid-column:var(--pc-column-xs);
}

@media (min-width: 30.625em){

.Polaris-Grid-Cell{
    grid-row:var(--pc-row-sm);
    grid-column:var(--pc-column-sm);
}
  }

@media (min-width: 48em){

.Polaris-Grid-Cell{
    grid-row:var(--pc-row-md);
    grid-column:var(--pc-column-md);
}
  }

@media (min-width: 65em){

.Polaris-Grid-Cell{
    grid-row:var(--pc-row-lg);
    grid-column:var(--pc-column-lg);
}
  }

@media (min-width: 90em){

.Polaris-Grid-Cell{
    grid-row:var(--pc-row-xl);
    grid-column:var(--pc-column-xl);
}
  }

.Polaris-Grid-Cell--cell_1ColumnXs {
  grid-column-end: span 1;
}

.Polaris-Grid-Cell--cell_2ColumnXs {
  grid-column-end: span 2;
}

.Polaris-Grid-Cell--cell_3ColumnXs {
  grid-column-end: span 3;
}

.Polaris-Grid-Cell--cell_4ColumnXs {
  grid-column-end: span 4;
}

.Polaris-Grid-Cell--cell_5ColumnXs {
  grid-column-end: span 5;
}

.Polaris-Grid-Cell--cell_6ColumnXs {
  grid-column-end: span 6;
}

@media (min-width: 30.625em) {

  .Polaris-Grid-Cell--cell_1ColumnSm {
    grid-column-end: span 1;
  }

  .Polaris-Grid-Cell--cell_2ColumnSm {
    grid-column-end: span 2;
  }

  .Polaris-Grid-Cell--cell_3ColumnSm {
    grid-column-end: span 3;
  }

  .Polaris-Grid-Cell--cell_4ColumnSm {
    grid-column-end: span 4;
  }

  .Polaris-Grid-Cell--cell_5ColumnSm {
    grid-column-end: span 5;
  }

  .Polaris-Grid-Cell--cell_6ColumnSm {
    grid-column-end: span 6;
  }
}

@media (min-width: 48em) {

  .Polaris-Grid-Cell--cell_1ColumnMd {
    grid-column-end: span 1;
  }

  .Polaris-Grid-Cell--cell_2ColumnMd {
    grid-column-end: span 2;
  }

  .Polaris-Grid-Cell--cell_3ColumnMd {
    grid-column-end: span 3;
  }

  .Polaris-Grid-Cell--cell_4ColumnMd {
    grid-column-end: span 4;
  }

  .Polaris-Grid-Cell--cell_5ColumnMd {
    grid-column-end: span 5;
  }

  .Polaris-Grid-Cell--cell_6ColumnMd {
    grid-column-end: span 6;
  }
}

@media (min-width: 65em) {

  .Polaris-Grid-Cell--cell_1ColumnLg {
    grid-column-end: span 1;
  }

  .Polaris-Grid-Cell--cell_2ColumnLg {
    grid-column-end: span 2;
  }

  .Polaris-Grid-Cell--cell_3ColumnLg {
    grid-column-end: span 3;
  }

  .Polaris-Grid-Cell--cell_4ColumnLg {
    grid-column-end: span 4;
  }

  .Polaris-Grid-Cell--cell_5ColumnLg {
    grid-column-end: span 5;
  }

  .Polaris-Grid-Cell--cell_6ColumnLg {
    grid-column-end: span 6;
  }

  .Polaris-Grid-Cell--cell_7ColumnLg {
    grid-column-end: span 7;
  }

  .Polaris-Grid-Cell--cell_8ColumnLg {
    grid-column-end: span 8;
  }

  .Polaris-Grid-Cell--cell_9ColumnLg {
    grid-column-end: span 9;
  }

  .Polaris-Grid-Cell--cell_10ColumnLg {
    grid-column-end: span 10;
  }

  .Polaris-Grid-Cell--cell_11ColumnLg {
    grid-column-end: span 11;
  }

  .Polaris-Grid-Cell--cell_12ColumnLg {
    grid-column-end: span 12;
  }
}

@media (min-width: 90em) {

  .Polaris-Grid-Cell--cell_1ColumnXl {
    grid-column-end: span 1;
  }

  .Polaris-Grid-Cell--cell_2ColumnXl {
    grid-column-end: span 2;
  }

  .Polaris-Grid-Cell--cell_3ColumnXl {
    grid-column-end: span 3;
  }

  .Polaris-Grid-Cell--cell_4ColumnXl {
    grid-column-end: span 4;
  }

  .Polaris-Grid-Cell--cell_5ColumnXl {
    grid-column-end: span 5;
  }

  .Polaris-Grid-Cell--cell_6ColumnXl {
    grid-column-end: span 6;
  }

  .Polaris-Grid-Cell--cell_7ColumnXl {
    grid-column-end: span 7;
  }

  .Polaris-Grid-Cell--cell_8ColumnXl {
    grid-column-end: span 8;
  }

  .Polaris-Grid-Cell--cell_9ColumnXl {
    grid-column-end: span 9;
  }

  .Polaris-Grid-Cell--cell_10ColumnXl {
    grid-column-end: span 10;
  }

  .Polaris-Grid-Cell--cell_11ColumnXl {
    grid-column-end: span 11;
  }

  .Polaris-Grid-Cell--cell_12ColumnXl {
    grid-column-end: span 12;
  }
}


.Polaris-Grid{
  --pc-grid-areas-xs:initial;
  --pc-grid-areas-sm:var(--pc-grid-areas-xs);
  --pc-grid-areas-md:var(--pc-grid-areas-sm);
  --pc-grid-areas-lg:var(--pc-grid-areas-md);
  --pc-grid-areas-xl:var(--pc-grid-areas-lg);
  --pc-grid-columns-xs:6;
  --pc-grid-columns-sm:var(--pc-grid-columns-xs);
  --pc-grid-columns-md:var(--pc-grid-columns-sm);
  --pc-grid-columns-lg:12;
  --pc-grid-columns-xl:var(--pc-grid-columns-lg);
  display:grid;
  gap:var(--pc-grid-gap-xs, var(--p-space-400));
  grid-template-areas:var(--pc-grid-areas-xs);
  grid-template-columns:repeat(var(--pc-grid-columns-xs), minmax(0, 1fr));
}
@media (min-width: 30.625em){
  .Polaris-Grid{
    gap:var(--pc-grid-gap-sm, var(--p-space-400));
    grid-template-areas:var(--pc-grid-areas-sm);
    grid-template-columns:repeat(var(--pc-grid-columns-sm), minmax(0, 1fr));
}
  }
@media (min-width: 48em){
  .Polaris-Grid{
    gap:var(--pc-grid-gap-md, var(--p-space-400));
    grid-template-areas:var(--pc-grid-areas-md);
    grid-template-columns:repeat(var(--pc-grid-columns-md), minmax(0, 1fr));
}
  }
@media (min-width: 65em){
  .Polaris-Grid{
    gap:var(--pc-grid-gap-lg, var(--p-space-400));
    grid-template-areas:var(--pc-grid-areas-lg);
    grid-template-columns:repeat(var(--pc-grid-columns-lg), minmax(0, 1fr));
}
  }
@media (min-width: 90em){
  .Polaris-Grid{
    gap:var(--pc-grid-gap-xl, var(--p-space-400));
    grid-template-areas:var(--pc-grid-areas-xl);
    grid-template-columns:repeat(var(--pc-grid-columns-xl), minmax(0, 1fr));
}
  }


:root{
  --item-min-height:var(--p-space-400);
  --item-min-width:3.125rem;
  --item-vertical-padding:var(--p-space-200);
}

@media (max-width: 47.9975em){

.Polaris-Tabs__Outer{
    max-width:100%;
    overflow:hidden;
    height:unset;
    padding:0;
}
  }

@media (max-width: 47.9975em){

.Polaris-Tabs__Wrapper{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding:var(--p-space-200);
}
  }

@media (min-width: 48em){

.Polaris-Tabs__WrapperWithNewButton{
    position:relative;
    display:inline-flex;
    padding-right:var(--p-space-800);
}
  }

@media (max-width: 47.9975em){

.Polaris-Tabs__ButtonWrapper{
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
  }

.Polaris-Tabs{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
  padding:0;
  list-style:none;
  gap:var(--p-space-100);
}

@media (min-width: 48em){

.Polaris-Tabs{
    padding:0 var(--p-space-100);
    flex-wrap:wrap;
    align-items:stretch;
}
  }

.Polaris-Tabs__Tab{
  position: relative;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:var(--p-space-100) var(--p-space-300);
  border:0;
  border-radius:var(--p-border-radius-200);
  background-color:transparent;
  color:var(--p-color-text-brand);
  cursor:pointer;
  text-decoration:none;
  width:100%;
  height:var(--p-height-700);
  min-width:100%;
  margin-top:var(--p-space-025);
  margin-bottom:calc(var(--p-space-025)*-1);
  outline:none;
  text-align:center;
  white-space:nowrap;
}

.Polaris-Tabs__Tab::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-200);
}

.Polaris-Tabs__Tab[aria-disabled='true']{
    cursor:default;
    color:var(--p-color-text-disabled);
  }

.Polaris-Tabs__Tab[aria-disabled='true'] path{
      fill:var(--p-color-icon-disabled);
    }

.Polaris-Tabs__Tab:not([aria-disabled='true']):hover{
    background-color:var(--p-color-bg-fill-transparent-hover);
    color:var(--p-color-text-brand);
  }

.Polaris-Tabs__Tab:not([aria-disabled='true']):focus{
    background-color:var(--p-color-bg-surface-hover);
    color:var(--p-color-text);
  }

.Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible{
    background-color:transparent;
    color:var(--p-color-text-brand);
  }

.Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible:not(:active){
    outline:0;
  }

.Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Tabs__Tab:not([aria-disabled='true']):active{
    background-color:var(--p-color-bg-surface-tertiary);
    color:var(--p-color-text-brand);
    z-index:var(--p-z-index-1);
  }

.Polaris-Tabs__Tab path{
    fill:currentColor;
  }

.Polaris-Tabs__Tab--active{
  background:var(--p-color-bg-fill-transparent-selected);
  border-radius:var(--p-border-radius-200);
  color:var(--p-color-text);
}

.Polaris-Tabs__Tab--active[aria-disabled='true']{
    background:var(--p-color-bg-surface-disabled);
    color:var(--p-color-text-disabled);
  }

.Polaris-Tabs__Tab--active:not([aria-disabled='true']):hover,
  .Polaris-Tabs__Tab--active:not([aria-disabled='true']):focus{
    background-color:var(--p-color-bg-fill-transparent-hover);
    color:var(--p-color-text-brand);
  }

.Polaris-Tabs__Tab--active:not([aria-disabled='true']):active{
    background-color:var(--p-color-bg-fill-transparent-selected);
    color:var(--p-color-text-brand);
  }

.Polaris-Tabs__Tab--hasActions{
  padding-right:var(--p-space-200);
}

.Polaris-Tabs__Tab--iconOnly{
  padding-left:var(--p-space-100);
  padding-right:var(--p-space-100);
  width:var(--p-space-800);
}

.Polaris-Tabs--fillSpace .Polaris-Tabs__TabContainer{
    flex:1 1 auto;
  }

.Polaris-Tabs--fitted{
  flex-wrap:nowrap;
}

.Polaris-Tabs--fitted .Polaris-Tabs__TabContainer{
    flex:1 1 100%;
  }

.Polaris-Tabs__TabContainer{
  display:flex;
  margin:0;
  padding:0;
}

.Polaris-Tabs--titleWithIcon{
  display:flex;
}

.Polaris-Tabs__List{
  list-style:none;
  margin:0;
  padding:var(--p-space-200);
}

.Polaris-Tabs__Item{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  position: relative;
  display:block;
  width:100%;
  min-height:var(--item-min-height);
  padding:var(--item-vertical-padding) var(--p-space-400);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  border-radius:var(--p-border-radius-100);
  color:inherit;
}

.Polaris-Tabs__Item:focus{
    outline:none;
  }

.Polaris-Tabs__Item::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Tabs__Item::-moz-focus-inner{
    border:none;
  }

.Polaris-Tabs__Item:hover{
    background-color:var(--p-color-bg-surface-hover);
    color:var(--p-color-text);
  }

.Polaris-Tabs__Item:active{
    background-color:var(--p-color-bg-surface-active);
    color:var(--p-color-text);
  }

.Polaris-Tabs__Item:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Tabs__Item:visited{
    color:inherit;
  }

.Polaris-Tabs__DisclosureTab{
  display:none;
}

.Polaris-Tabs__DisclosureTab--visible{
  display:flex;
}

.Polaris-Tabs__DisclosureActivator{
  position: relative;
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  height:100%;
  background-color:transparent;
  color:var(--p-color-text-brand);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:var(--p-border-radius-200);
  padding:0 var(--p-space-200) 0 var(--p-space-300);
  margin-top:var(--p-space-025);
  border:none;
  outline:none;
}

.Polaris-Tabs__DisclosureActivator::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Tabs__DisclosureActivator:focus{
    outline:none;
  }

.Polaris-Tabs__DisclosureActivator svg{
    fill:var(--p-color-icon);
  }

.Polaris-Tabs__DisclosureActivator:hover svg,
  .Polaris-Tabs__DisclosureActivator:focus svg{
    fill:var(--p-color-icon);
  }

.Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):hover{
    background-color:var(--p-color-bg-fill-transparent-hover);
    color:var(--p-color-text-brand);
  }

.Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):focus{
    background-color:transparent;
    color:var(--p-color-text-brand);
  }

.Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):focus-visible{
    outline:0;
  }

.Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Tabs__DisclosureActivator:not([aria-disabled='true']):active{
    background-color:var(--p-color-bg-surface-tertiary);
    z-index:var(--p-z-index-1);
  }

.Polaris-Tabs__DisclosureActivator[aria-disabled='true']{
    cursor:default;
    color:var(--p-color-text-disabled);
    background:var(--p-color-bg-surface-disabled);
  }

.Polaris-Tabs__DisclosureActivator[aria-disabled='true'] path{
      fill:var(--p-color-icon-disabled);
    }

.Polaris-Tabs__TabsMeasurer{
  display:flex;
  gap:0;
  padding:0;
  visibility:hidden;
  height:0;
}

.Polaris-Tabs__NewTab{
  padding:0 var(--p-space-200) 0 var(--p-space-100);
}

@media (min-width: 48em){

.Polaris-Tabs__NewTab{
    position:absolute;
    right:0;
    top:0;
    padding:0;
}
  }

.Polaris-Tabs__ActionListWrap{
  display:block;
}

.Polaris-Tabs__Panel{
  display:block;
}

.Polaris-Tabs__Panel:focus{
    outline:none;
  }

.Polaris-Tabs__Panel--hidden{
  display:none;
}


.Polaris-IndexFilters-Container{
  border-bottom:var(--p-border-width-025) solid var(--p-color-border);
  border-top-left-radius:var(--p-border-radius-200);
  border-top-right-radius:var(--p-border-radius-200);
  background:var(--p-color-bg-surface);
}

@media (max-width: 30.6225em){
  .Polaris-IndexFilters-Container{
    border-top-left-radius:0;
    border-top-right-radius:0;
    height:unset;
  }
}


.Polaris-SortButton-DirectionButton{
  position: relative;
  border-radius:var(--p-border-radius-200);
  padding:var(--p-space-100) var(--p-space-300) var(--p-space-100) var(--p-space-200);
  display:grid;
  align-items:center;
  grid-template-columns:auto 1fr;
  gap:var(--p-space-050);
  cursor:pointer;
  width:100%;
  border:none;
  background:none;
  text-align:left;
}

.Polaris-SortButton-DirectionButton::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-200);
}

.Polaris-SortButton-DirectionButton:hover{
    background-color:var(--p-color-bg-fill-transparent-hover);
  }

.Polaris-SortButton-DirectionButton + .Polaris-SortButton-DirectionButton{
    margin-top:var(--p-space-100);
  }

.Polaris-SortButton-DirectionButton:focus-visible{
    outline:0;
  }

.Polaris-SortButton-DirectionButton:focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-SortButton-DirectionButton__DirectionButton--active{
  color:var(--p-color-text);
  background:var(--p-color-bg-fill-transparent-active);
}


.Polaris-IndexFilters__IndexFiltersWrapper{
  width:100%;
}

@media (min-width: 30.625em){
  .Polaris-IndexFilters__IndexFiltersWrapper{
    height:auto !important;
  }
}

@media (max-width: 30.6225em){
  .Polaris-IndexFilters.Polaris-IndexFilters__IndexFiltersSticky{
    position:fixed;
    z-index:var(--p-z-index-1);
    top:3.5rem;
    width:100vw;
    box-shadow:var(--p-shadow-200);
  }

  .Polaris-IndexFilters.Polaris-IndexFilters__IndexFiltersStickyFlush{
    top:0;
  }
}

.Polaris-IndexFilters__TabsWrapper{
  flex:1 1;
  height:2.75rem;
}

@media (max-width: 47.9975em){

.Polaris-IndexFilters__TabsWrapper{
    height:var(--p-space-1200);
}
  }

.Polaris-IndexFilters__SmallScreenTabsWrapper{
  overflow:hidden;
  padding:var(--p-space-100) var(--p-space-0) var(--p-space-200) var(--p-space-300);
  padding:0;
}

.Polaris-IndexFilters__SmallScreenTabsWrapper.Polaris-IndexFilters__TabsWrapperLoading{
    position:relative;
  }

.Polaris-IndexFilters__DesktopLoading{
  position:absolute;
  right:100%;
  top:50%;
  height:1.25rem;
  width:1.25rem;
  transform:translateY(-50%);
}

.Polaris-IndexFilters__TabsLoading svg{
  display:block;
}

.Polaris-IndexFilters__TabsWrapperLoading .Polaris-IndexFilters__TabsLoading{
  position:absolute;
  right:0;
  top:0;
  height:3.4375rem;
  width:3.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--p-color-bg-surface);
}

.Polaris-IndexFilters__TabsWrapperLoading .Polaris-IndexFilters__TabsLoading::before{
    content:'';
    position:absolute;
    top:0;
    left:-1rem;
    width:var(--p-space-400);
    height:100%;
    pointer-events:none;
    background:linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      var(--p-color-bg-surface)
    );
  }

.Polaris-IndexFilters__ActionWrap{
  position:relative;
  display:flex;
  gap:var(--p-space-200);
  align-items:center;
  justify-content:flex-start;
  padding:var(--p-space-150) var(--p-space-200);
}

@media (max-width: 47.9975em){

.Polaris-IndexFilters__ActionWrap{
    padding:var(--p-space-200);
    height:3rem;
    border-left:var(--p-border-width-025) solid var(--p-color-border-secondary);
}

    .Polaris-IndexFilters__ActionWrap::before{
      content:'';
      position:absolute;
      top:0;
      left:-1.0625rem;
      width:var(--p-space-400);
      height:100%;
      pointer-events:none;
      background:linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        var(--p-color-bg-surface)
      );
    }
  }

.Polaris-IndexFilters__ActionWrap svg{
  display:block;
}

.Polaris-IndexFilters__Spinner{
  width:1.25rem;
  transform:translateX(var(--p-space-100));
}

.Polaris-IndexFilters__Spinner svg{
    display:block;
  }

.Polaris-IndexFilters__ButtonWrap button, .Polaris-IndexFilters__ActionWrap button{
    display:flex;
  }


.Polaris-IndexTable{
  --pc-index-table-translate-offset:2.1875rem;
  --pc-index-table-table-header-offset:var(--pg-control-height);
  --pc-index-table-cell:1;
  --pc-index-table-sticky-cell:29;
  --pc-index-table-bulk-actions:31;
  --pc-index-table-loading-panel:31;
  --pc-index-table-checkbox-offset-left:var(--p-space-300);
  --pc-index-table-checkbox-offset-right:var(--p-space-200);
  position:relative;
  border-radius:0;
  scrollbar-color:auto;
}

@media (min-width: 30.625em){

.Polaris-IndexTable{
    border-radius:inherit;
    border-start-start-radius:0;
    border-start-end-radius:0;
}
  }

.Polaris-IndexTable__IndexTableWrapper{
  border-radius:0;
}

.Polaris-IndexTable__IndexTableWrapper .Polaris-IndexTable__IndexTableWrapper--scrollBarHidden{
    border-radius:inherit;
  }

.Polaris-IndexTable__IndexTableWrapperWithSelectAllActions{
  --pc-index-table-bulk-actions-offset:2.5625rem;
  padding-bottom:var(--pc-index-table-bulk-actions-offset);
  border-radius:0;
}

.Polaris-IndexTable__LoadingPanel{
  position:absolute;
  z-index:var(--p-z-index-2);
  top:0;
  left:0;
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;
  background:var(--p-color-bg-surface);
  padding:var(--p-space-200) var(--p-space-400);
  box-shadow:var(--p-shadow-300);
  opacity:0;
  transform:translateY(-100%);
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-in), transform var(--p-motion-duration-100) var(--p-motion-ease-in), visibility var(--p-motion-duration-0) linear var(--p-motion-duration-100);
  visibility:hidden;
}

.Polaris-IndexTable__LoadingPanel.Polaris-IndexTable__LoadingPanelEntered{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-out), transform var(--p-motion-duration-100) var(--p-motion-ease-out);
  }

.Polaris-IndexTable__LoadingPanel .Polaris-IndexTable__LoadingPanelRow{
    display:flex;
    flex-wrap:nowrap;
    width:100%;
    background:var(--p-color-bg-surface-info);
    padding:var(--p-space-200);
    padding-bottom:var(--p-space-100);
    border-radius:var(--p-border-radius-100);
  }

.Polaris-IndexTable__LoadingPanelText{
  margin-left:var(--p-space-300);
  color:var(--p-color-text);
}

.Polaris-IndexTable__Table{
  width:100%;
  min-width:100%;
  border-collapse:collapse;
}

.Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableCell--first,
  .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableCell--first,
  .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
  .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
  .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--first,
  .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--first,
  .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--second,
  .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--second{
    visibility:visible;
    background-color:var(--p-color-bg-surface);
  }

.Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--first,
  .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--first,
  .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--second,
  .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--second{
    visibility:visible;
    background-color:var(--p-color-bg-surface-secondary);
  }

.Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableCell--first,
  .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableCell--first,
  .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableHeading--first,
  .Polaris-IndexTable__StickyTable--scrolling .Polaris-IndexTable__TableHeading--first{
    filter:drop-shadow(0.0625rem 0 0 var(--p-color-border-secondary));
  }

@media (min-width: 30.625em){

.Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second,
    .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second,
    .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableHeading--second,
    .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableHeading--second{
        filter:drop-shadow(0.0625rem 0 0 var(--p-color-border-secondary));
    }
      }

.Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--sticky.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second,
      .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--sticky.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second,
      .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__StickyTable.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second,
      .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__StickyTable.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second,
      .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--sticky.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--sticky.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__StickyTable.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__StickyTable.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child{
        filter:drop-shadow(0.0625rem 0 0 var(--p-color-border-secondary));
      }

.Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second,
    .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableHeading--second,
    .Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:first-child{
      visibility:visible;
    }

.Polaris-IndexTable__TableRow{
  background-color:var(--p-color-bg-surface);
  cursor:pointer;
  border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
}

.Polaris-IndexTable__TableRow:first-child{
    border-top:var(--p-border-width-025) solid var(--p-color-border);
  }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--unclickable{
    cursor:auto;
  }

.Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-success);
    }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first::before{
        background-color:var(--p-color-bg-surface-success);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-warning);
    }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first::before{
        background-color:var(--p-color-bg-surface-warning);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-critical);
    }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first::before{
        background-color:var(--p-color-bg-surface-critical);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-secondary);
      color:var(--p-color-text-secondary);
    }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first::before{
        background-color:var(--p-color-bg-surface-secondary);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader{
    cursor:default;
  }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:last-child{
      color:var(--p-color-text-secondary);
      font-weight:var(--p-font-weight-medium);
      font-size:var(--p-font-size-300);
      background-color:var(--p-color-bg-surface-secondary);
      border-top:var(--p-border-width-025) solid var(--p-color-border);
      border-bottom:var(--p-border-width-025) solid var(--p-color-border);
      border-color:var(--p-color-border);
    }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child{
    --pc-index-table-checkbox-width:var(--p-space-500);
    --pc-index-table-checkbox-width-sm:calc(var(--pc-index-table-checkbox-width) + var(--p-width-050));
    --pc-index-table-checkbox-padding-left:var(--p-space-300);
    --pc-index-table-checkbox-padding-right:var(--p-width-150);
    --pc-index-table-checkbox-child-offset:calc(var(--pc-index-table-checkbox-width) + var(--pc-index-table-checkbox-padding-left));
    --pc-index-table-checkbox-child-offset-sm:calc(var(--pc-index-table-checkbox-width-sm) + var(--pc-index-table-checkbox-padding-left));
    --pc-table-shifted-checkbox-z-index:30;
  }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first{
      left:var(--pc-index-table-checkbox-child-offset);
      z-index:var(--pc-table-shifted-checkbox-z-index);
    }

@media (max-width: 30.6225em){

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first{
        left:var(--pc-index-table-checkbox-child-offset-sm);
    }
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first::before{
        content:'';
        position:absolute;
        display:block;
        width:calc(var(--pc-index-table-checkbox-child-offset) + var(--pc-index-table-checkbox-padding-right));
        height:100%;
        top:0;
        right:var(--pc-index-table-checkbox-child-offset);
        background-color:var(--p-color-bg-surface);
      }

@media (max-width: 30.6225em){

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first::before{
          width:calc(var(--pc-index-table-checkbox-child-offset-sm) + var(--pc-index-table-checkbox-padding-right));
          right:var(--pc-index-table-checkbox-child-offset-sm);
      }
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell{
      --pc-index-table-cell-padding:var(--p-space-150);
      padding-left:calc(var(--pc-index-table-checkbox-child-offset) + var(--pc-index-table-cell-padding));
    }

@media (max-width: 30.6225em){

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell{
        padding-left:calc(var(--pc-index-table-checkbox-child-offset-sm) + var(--pc-index-table-cell-padding));
    }
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected{
    border-color:var(--p-color-border);
  }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableHeading--first,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableHeading--second,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-selected);
    }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-selected);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-success-active);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-success-active);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-warning-active);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-warning-active);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-critical-active);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-critical-active);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-secondary-active);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-secondary-active);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-secondary);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled),
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-hover);
    }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-hover);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-success-hover);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-success-hover);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-critical-hover);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-critical-hover);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-warning-hover);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-warning-hover);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-secondary-hover);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled)::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-secondary-hover);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-secondary);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-brand-hover);
    }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected .Polaris-IndexTable__TableCell:last-child::before{
        background-color:var(--p-color-bg-surface-brand-hover);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-brand-hover);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-success-hover);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess::before, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell--first::before{
          background-color:var(--p-color-bg-surface-success-hover);
        }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-warning-hover);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-critical-hover);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-secondary-hover);
      }

.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-secondary);
      }

.Polaris-IndexTable__TableRow--disabled{
  cursor:default;
  color:var(--p-color-text-secondary);
}

.Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface);
    }

.Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:last-child{
      background:var(--p-color-bg-surface-secondary);
    }

.Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child:nth-child(2n)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child:nth-child(2n) .Polaris-IndexTable__TableCell--first::before{
        background-color:var(--p-color-bg-surface-secondary);
      }

.Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-hover);
    }

.Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-brand-selected);
    }

.Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child.Polaris-IndexTable__TableRow--selected:nth-child(2n)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first::before{
        background-color:var(--p-color-bg-surface-brand-selected);
      }

.Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n),
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__Table--scrolling .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:last-child,
    .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-brand-hover);
    }

.Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1)::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n) .Polaris-IndexTable__TableCell--first::before, .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--selected:nth-child(2n + 1) .Polaris-IndexTable__TableCell--first::before{
        background-color:var(--p-color-bg-surface-brand-hover);
      }

.Polaris-IndexTable__TableHeading{
  --pc-index-table-heading-padding-x:var(--p-space-150);
  --pc-index-table-heading-padding-y:var(--p-space-200);
  background:var(--p-color-bg-surface-secondary);
  padding:var(--pc-index-table-heading-padding-y) var(--pc-index-table-heading-padding-x);
  text-align:left;
  font-weight:var(--p-font-weight-medium);
  color:var(--p-color-text-secondary);
  font-size:var(--p-font-size-300);
  white-space:nowrap;
  border:0;
}

.Polaris-IndexTable__TableHeading:first-child:not(.Polaris-IndexTable__TableHeading--flush){
    padding-left:var(--p-space-300);
  }

.Polaris-IndexTable__TableHeading:last-child:not(.Polaris-IndexTable__TableHeading--flush){
    padding-right:var(--p-space-300);
    overflow-x:hidden;
  }

.Polaris-IndexTable--tableHeadingAlignCenter{
  text-align:center;
}

.Polaris-IndexTable--tableHeadingAlignCenter [class*='TooltipContainer']{
    justify-content:center;
  }

.Polaris-IndexTable--tableHeadingAlignEnd{
  text-align:right;
}

.Polaris-IndexTable--tableHeadingAlignEnd [class*='TooltipContainer'],
  .Polaris-IndexTable--tableHeadingAlignEnd [class*='SortableTableHeadingWithCustomMarkup']{
    justify-content:end;
  }

.Polaris-IndexTable--tableHeadingExtraPaddingRight{
  --pc-index-table-heading-extra-padding-right:0rem;
  padding-right:var(--pc-index-table-heading-extra-padding-right);
}

.Polaris-IndexTable__TableHeading--sortable{
  background:var(--p-color-bg-surface-secondary);
}

.Polaris-IndexTable__TableHeading--flush{
  --pc-index-table-heading-padding-x:0rem;
  padding:var(--pc-index-table-heading-padding-y) var(--pc-index-table-heading-padding-x);
}

.Polaris-IndexTable__TableHeading--first{
  position:sticky;
  left:0;
  padding-left:var(--pc-index-table-checkbox-offset-left);
  padding-right:var(--pc-index-table-checkbox-offset-right);
  width:var(--p-space-500);
  z-index:var(--pc-index-table-sticky-cell);
}

.Polaris-IndexTable__TableHeadingSortButton{
  position:relative;
  background:none;
  padding:0;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:var(--p-font-weight-medium);
  color:var(--p-color-text-secondary);
  font-size:var(--p-font-size-300);
  line-height:var(--p-font-line-height-500);
}

.Polaris-IndexTable__TableHeadingSortButton:hover .Polaris-IndexTable__TableHeadingSortIcon, .Polaris-IndexTable__TableHeadingSortButton:focus .Polaris-IndexTable__TableHeadingSortIcon{
      opacity:1;
    }

.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd{
  transform:translateX(var(--p-space-500));
  transition-delay:var(--p-motion-duration-50);
}

.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:hover,
  .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:focus{
    transition-delay:none;
    transform:translateX(var(--p-space-100));
  }

.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:hover::before{
  content:'';
  position:absolute;
  top:0;
  left:calc(100% - var(--p-space-200));
  height:100%;
  width:var(--p-space-600);
  display:block;
  animation:none;
  transition:none;
}

.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted{
  transform:translateX(var(--p-space-100));
}

.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{
    animation:none;
  }

.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndPreviouslySorted{
  animation:Polaris-IndexTable--rightAlignedSortButtonSlideOut var(--p-motion-duration-50) var(--p-motion-ease);
}

.Polaris-IndexTable__TableHeadingSortIcon{
  order:1;
  opacity:0;
  height:var(--p-space-500);
  width:var(--p-space-500);
}

.Polaris-IndexTable__TableHeadingSortIcon:not(.Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd:hover),
  .Polaris-IndexTable__TableHeadingSortIcon:not(.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndPreviouslySorted){
    transition:opacity var(--p-motion-duration-50) var(--p-motion-ease);
  }

.Polaris-IndexTable__TableHeadingSortButton:hover .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{
    animation:Polaris-IndexTable--revealRightAlignedSortButtonIcon var(--p-motion-duration-200) var(--p-motion-ease);
  }

.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted:hover .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{
    animation:none;
  }

.Polaris-IndexTable__TableHeadingUnderline::after{
  content:'';
  position:absolute;
  left:0;
  bottom:calc(var(--p-border-width-050)*-1);
  width:100%;
  height:var(--p-border-width-050);
  border-bottom:var(--p-border-width-050) dotted var(--p-color-border-tertiary);
}

.Polaris-IndexTable__TableHeadingTooltipUnderlinePlaceholder{
  border-bottom:var(--p-border-width-050) dotted transparent;
}

.Polaris-IndexTable__TableHeadingSortIcon--visible{
  opacity:1;
}

.Polaris-IndexTable__TableHeadingSortSvg{
  display:block;
  width:100%;
  max-width:100%;
  max-height:100%;
}

.Polaris-IndexTable__SortableTableHeadingWithCustomMarkup{
  display:flex;
  flex-wrap:nowrap;
}

.Polaris-IndexTable__SortableTableHeaderWrapper{
  cursor:pointer;
}

.Polaris-IndexTable__ColumnHeaderCheckboxWrapper{
  display:flex;
}

.Polaris-IndexTable__FirstStickyHeaderElement{
  padding-right:0;
}

.Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable){
  padding-left:0;
}

.Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable):not(.Polaris-IndexTable__TableHeading--flush){
    padding-left:var(--pc-index-table-heading-padding-x);
  }

.Polaris-IndexTable__TableCell{
  z-index:var(--pc-index-table-cell);
  text-align:left;
  padding:var(--p-space-200) var(--p-space-400);
  white-space:nowrap;
}

.Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush){
    padding:var(--p-space-150);
  }

.Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{
      padding-left:var(--p-space-300);
    }

.Polaris-IndexTable__Table:not(.Polaris-IndexTable__Table--unselectable) .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{
        padding-right:var(--pc-index-table-checkbox-offset-right);
      }

.Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):last-child{
      padding-right:var(--p-space-300);
    }

.Polaris-IndexTable__TableCell--flush{
  padding:0;
}

.Polaris-IndexTable__TableCell--flush:first-child{
    padding:0;
  }

.Polaris-IndexTable__TableCell--first{
  position:sticky;
  left:0;
  z-index:var(--pc-index-table-sticky-cell);
  padding:var(--p-space-150) 0;
  vertical-align:middle;
}

.Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell{
  left:var(--pc-checkbox-offset);
}

@media (min-width: 30.625em){

.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell, .Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell{
      position:sticky;
      z-index:var(--pc-index-table-sticky-cell);
  }
    }

@media (min-width: 30.625em){

.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable), .Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable){
        position:sticky;
        left:0;
        z-index:var(--pc-index-table-sticky-cell);
    }
      }

.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second.Polaris-IndexTable__TableHeading--unselectable, .Polaris-IndexTable__StickyTable .Polaris-IndexTable__TableHeading--second.Polaris-IndexTable__TableHeading--unselectable{
      position:sticky;
      left:0;
      z-index:var(--pc-index-table-sticky-cell);
    }

.Polaris-IndexTable__Table--unselectable{
  --pc-index-table-checkbox-width:var(--p-space-500);
  --pc-index-table-checkbox-width-sm:calc(var(--pc-index-table-checkbox-width) + var(--p-width-050));
  --pc-index-table-checkbox-padding-left:var(--p-space-300);
  --pc-index-table-checkbox-child-offset:calc(var(--pc-index-table-checkbox-width) + var(--pc-index-table-checkbox-padding-left));
  --pc-index-table-checkbox-child-offset-sm:calc(var(--pc-index-table-checkbox-width-sm) + var(--pc-index-table-checkbox-padding-left));
}

.Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell:first-child{
      left:0;
      background-color:var(--p-color-bg-surface);
      z-index:var(--pc-index-table-sticky-cell);
      position:sticky;
    }

.Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child{
        background-color:var(--p-color-bg-surface-secondary);
      }

.Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:first-child{
    padding-left:var(--pc-index-table-checkbox-child-offset);
  }

@media (max-width: 30.6225em){

.Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:first-child{
      padding-left:var(--pc-index-table-checkbox-child-offset-sm);
  }
    }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{
        padding-left:var(--pc-index-table-checkbox-child-offset);
      }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled),
    .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,
    .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
    .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
    .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
      background-color:var(--p-color-bg-surface-hover);
    }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-success-hover);
      }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-warning-hover);
      }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-critical-hover);
      }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-secondary-hover);
      }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled),
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell--first + .Polaris-IndexTable__TableCell,
      .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{
        background-color:var(--p-color-bg-surface-secondary);
      }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:first-child{
      background-color:var(--p-color-bg-surface-success);
    }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:first-child{
      background-color:var(--p-color-bg-surface-warning);
    }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:first-child{
      background-color:var(--p-color-bg-surface-critical);
    }

.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:first-child{
      background-color:var(--p-color-bg-surface-secondary);
      color:var(--p-color-text-secondary);
    }

@media (min-width: 30.625em){

.Polaris-IndexTable--tableStickyScrolling .Polaris-IndexTable__TableCell:last-child,
  .Polaris-IndexTable--stickyTableHeaderStickyScrolling .Polaris-IndexTable__TableCell:last-child,
  .Polaris-IndexTable--tableStickyScrolling .Polaris-IndexTable__TableHeading--last,
  .Polaris-IndexTable--stickyTableHeaderStickyScrolling .Polaris-IndexTable__TableHeading--last{
      filter:drop-shadow(-0.0625rem 0 0 var(--p-color-border));
  }
    }

@media (min-width: 30.625em){

.Polaris-IndexTable--tableStickyLast .Polaris-IndexTable__TableCell:last-child, .Polaris-IndexTable--stickyTableHeaderStickyLast .Polaris-IndexTable__TableCell:last-child{
      position:sticky;
      right:0;
      background-color:var(--p-color-bg-surface);
      z-index:var(--pc-index-table-sticky-cell);
  }
    }

@media (min-width: 30.625em){

.Polaris-IndexTable--tableStickyLast .Polaris-IndexTable__TableHeading--last, .Polaris-IndexTable--stickyTableHeaderStickyLast .Polaris-IndexTable__TableHeading--last{
      position:sticky;
      right:0;
      background-color:var(--p-color-bg-surface-secondary);
      z-index:auto;
  }
    }

.Polaris-IndexTable__Table--sortable .Polaris-IndexTable__TableHeading{
    background-color:var(--p-color-bg-surface-secondary);
  }

.Polaris-IndexTable__StickyTable{
  position:absolute;
  top:0;
  left:0;
  right:0;
  visibility:hidden;
  z-index:var(--pc-index-table-loading-panel);
}

.Polaris-IndexTable__StickyTableHeader{
  position:absolute;
  display:flex;
  width:100%;
}

.Polaris-IndexTable__StickyTableHeader:not(.Polaris-IndexTable__StickyTableHeader--isSticky){
    top:-62.5rem;
    left:-62.5rem;
  }

.Polaris-IndexTable__StickyTableHeadings{
  overflow:hidden;
  flex:1 1 auto;
  display:flex;
}

.Polaris-IndexTable__StickyTableHeading--second{
  padding-left:0;
}

@media (min-width: 30.625em){

.Polaris-IndexTable__StickyTableHeading--second{
    display:none;
}
  }

.Polaris-IndexTable__StickyTableHeading--second.Polaris-IndexTable--unselectable{
    display:none;
  }

.Polaris-IndexTable--stickyTableHeadingSecondScrolling{
  padding:0 var(--p-space-025) 0 calc(var(--pc-index-table-checkbox-offset-right) + var(--pc-index-table-heading-padding-x));
  display:none;
}

@media (min-width: 30.625em){

.Polaris-IndexTable--stickyTableHeadingSecondScrolling{
    display:block;
}
  }

.Polaris-IndexTable__StickyTableHeader--isSticky{
  visibility:visible;
  box-shadow:var(--p-shadow-100);
  background-color:var(--p-color-bg-surface-secondary);
}

.Polaris-IndexTable:hover .Polaris-IndexTable__ScrollLeft{
    display:block;
  }

.Polaris-IndexTable:hover .Polaris-IndexTable__ScrollRight{
    display:block;
  }

.Polaris-IndexTable .Polaris-IndexTable__ScrollRight--onboarding{
  display:block;
}

.Polaris-IndexTable__SelectAllActionsWrapper{
  visibility:visible;
  position:absolute;
  z-index:var(--pc-index-table-bulk-actions);
  left:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.Polaris-IndexTable__SelectAllActionsWrapperWithPagination{
  width:100%;
}

@media (min-width: 48em){

.Polaris-IndexTable__SelectAllActionsWrapperWithPagination{
    width:calc(100% - 3.5rem - var(--p-space-200));
}
  }

.Polaris-IndexTable__SelectAllActionsWrapperSticky{
  position:fixed;
  top:auto;
  bottom:0;
}

.Polaris-IndexTable__SelectAllActionsWrapperAtEnd{
  opacity:0;
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease);
}

.Polaris-IndexTable__SelectAllActionsWrapperAtEndAppear{
  opacity:1;
}

.Polaris-IndexTable__BulkActionsWrapper{
  visibility:hidden;
  opacity:0;
  position:relative;
  z-index:var(--pc-index-table-bulk-actions);
  padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300);
  line-height:var(--p-font-line-height-500);
  background-color:var(--p-color-bg-surface);
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease), visibility var(--p-motion-duration-100) var(--p-motion-ease);
}

.Polaris-IndexTable__BulkActionsWrapper.Polaris-IndexTable__BulkActionsWrapperVisible{
    visibility:visible;
    opacity:1;
  }

.Polaris-IndexTable__PaginationWrapper{
  --pc-pagination-index:30;
  z-index:var(--pc-pagination-index);
}

@media (min-width: 48em){

.Polaris-IndexTable__PaginationWrapper{
    position:sticky;
    bottom:0;
}
  }

@media (min-width: 48em){

.Polaris-IndexTable__PaginationWrapperScrolledPastTop{
    position:absolute;
    bottom:auto;
    top:var(--pc-index-table-pagination-top-offset);
    width:100%;
}
  }

.Polaris-IndexTable__ScrollBarContainer{
  --pc-index-table-scroll-bar:30;
  --pc-index-table-scroll-bar-height-offset:2.5625rem;
  position:sticky;
  z-index:var(--pc-index-table-scroll-bar);
  bottom:0;
  padding:var(--p-space-050);
  background-color:var(--p-color-bg-surface);
  transition:bottom var(--p-motion-duration-100) var(--p-motion-ease);
}

@media (min-width: 30.625em){

.Polaris-IndexTable__ScrollBarContainer{
    border-bottom-right-radius:var(--p-border-radius-200);
    border-bottom-left-radius:var(--p-border-radius-200);
    padding:var(--p-space-050) var(--p-space-200);
}
  }

@media (min-width: 48em){

.Polaris-IndexTable__ScrollBarContainerWithPagination{
    bottom:var(--pc-index-table-scroll-bar-height-offset);
}

    .Polaris-IndexTable__ScrollBarContainerWithPagination.Polaris-IndexTable__ScrollBarContainerScrolledPastTop{
      position:absolute;
      top:var(--pc-index-table-scroll-bar-top-offset);
      bottom:auto;
      width:100%;
    }
  }

@media (min-width: 30.625em){

.Polaris-IndexTable__ScrollBarContainerWithPagination{
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
}
  }

.Polaris-IndexTable__ScrollBarContainerWithPagination.Polaris-IndexTable__ScrollBarContainerWithSelectAllActions{
    bottom:var(--pc-index-table-scroll-bar-height-offset);
  }

.Polaris-IndexTable__ScrollBarContainerWithSelectAllActions.Polaris-IndexTable__ScrollBarContainerScrolledPastTop{
    position:absolute;
    top:var(--pc-index-table-scroll-bar-top-offset);
    bottom:auto;
    width:100%;
  }

@media (min-width: 30.625em){

.Polaris-IndexTable__ScrollBarContainerWithSelectAllActions{
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
}
  }

.Polaris-IndexTable__ScrollBarContainerSelectAllActionsSticky{
  bottom:var(--pc-index-table-scroll-bar-height-offset);
}

.Polaris-IndexTable--scrollBarContainerCondensed{
  visibility:hidden;
  pointer-events:none;
}

.Polaris-IndexTable--scrollBarContainerHidden{
  height:0;
  padding:0;
}

.Polaris-IndexTable__ScrollBar{
  overflow-x:scroll;
  width:100%;
  margin:0;
  padding:0;
}

.Polaris-IndexTable__ScrollBar::-webkit-scrollbar-track{
  border-radius:var(--p-border-radius-100);
  background-color:transparent;
}

.Polaris-IndexTable__ScrollBar::-webkit-scrollbar{
  -webkit-appearance:none;
          appearance:none;
  height:var(--p-space-200);
  width:var(--p-space-200);
  background-color:transparent;
}

.Polaris-IndexTable__ScrollBar::-webkit-scrollbar-thumb{
  border-radius:var(--p-border-radius-100);
  background-color:var(--p-color-border-tertiary);
  -webkit-transition:background-color var(--p-motion-duration-100) var(--p-motion-ease-out);
  transition:background-color var(--p-motion-duration-100) var(--p-motion-ease-out);
}

.Polaris-IndexTable__ScrollBar:hover::-webkit-scrollbar-thumb{
  background-color:var(--p-color-border-inverse);
}

.Polaris-IndexTable--disableTextSelection{
  -webkit-user-select:none;
          user-select:none;
}

.Polaris-IndexTable__EmptySearchResultWrapper{
  padding:var(--p-space-400);
}

.Polaris-IndexTable--condensedRow{
  width:calc(100% + var(--pc-index-table-translate-offset));
  transform:translateX(calc(var(--pc-index-table-translate-offset)*-1));
  transition:transform var(--p-motion-ease) var(--p-motion-duration-200);
  display:flex;
  border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
  filter:none;
  align-items:center;
}

[data-selectmode='true'] .Polaris-IndexTable--condensedRow{
    transform:none;
  }

.Polaris-IndexTable__CondensedList{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  border-top:0;
}

.Polaris-IndexTable__CondensedList .Polaris-IndexTable__TableRow:first-child{
    border-top:0;
  }

.Polaris-IndexTable__HeaderWrapper{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-height:3.5rem;
  padding:var(--p-space-200) var(--p-space-400);
  background-color:var(--p-color-bg-surface);
}

.Polaris-IndexTable__HeaderWrapper.Polaris-IndexTable--unselectable{
    min-height:auto;
    padding:0;
  }

.Polaris-IndexTable__StickyTable--condensed{
  visibility:visible;
}

.Polaris-IndexTable__StickyTableHeader--condensed{
  padding:var(--p-space-400) var(--p-space-400) var(--p-space-200);
}

.Polaris-IndexTable__ScrollBarContent{
  height:0.0625rem;
  width:var(--pc-index-table-scroll-bar-content-width);
}

@keyframes Polaris-IndexTable--rightAlignedSortButtonSlideOut{
  0%{
    transform:translateX(var(--p-space-100));
  }

  80%{
    transform:translateX(var(--p-space-100));
  }

  100%{
    transform:translateX(var(--p-space-500));
  }
}

@keyframes Polaris-IndexTable--revealRightAlignedSortButtonIcon{
  0%{
    transform:translateX(calc(var(--p-space-500)*-1));
    opacity:0;
  }

  40%{
    opacity:0;
  }

  50%{
    transform:translateX(0);
  }

  100%{
    opacity:1;
  }
}


.Polaris-IndexTable-Checkbox__Wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
}


.Polaris-IndexTable-ScrollContainer{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -ms-overflow-style:none;
  scrollbar-width:none;
  border-radius:inherit;
}

.Polaris-IndexTable-ScrollContainer::-webkit-scrollbar{
  display:none;
}


.Polaris-InlineCode__Code{
  background-color:var(--p-color-bg-fill-tertiary);
  border-radius:var(--p-border-radius-050);
  font-family:var(--p-font-family-mono);
  font-size:0.85em;
  font-weight:var(--p-font-weight-medium);
  padding:var(--p-space-025) var(--p-space-100);
}


.Polaris-KeyboardKey{
  --pc-keyboard-key-base-dimension:1.75rem;
  height:var(--pc-keyboard-key-base-dimension);
  display:inline-flex;
  justify-content:center;
  margin:0 var(--p-space-050) var(--p-space-050);
  margin-bottom:0;
  padding:0 var(--p-space-200);
  background:var(--p-color-bg-surface-tertiary);
  border-radius:var(--p-border-radius-100);
  color:var(--p-color-text-secondary);
  font-size:var(--p-font-size-350);
  font-weight:var(--p-font-weight-medium);
  font-family:var(--p-font-family-sans);
  line-height:var(--pc-keyboard-key-base-dimension);
  text-align:center;
  min-width:var(--pc-keyboard-key-base-dimension);
  -webkit-user-select:none;
          user-select:none;
}

.Polaris-KeyboardKey--small{
  box-shadow:none;
  line-height:var(--p-font-size-400);
  padding:var(--p-space-050) var(--p-space-100);
  font-size:var(--p-font-size-300);
  height:var(--p-space-500);
  min-width:var(--p-space-500);
}


.Polaris-TextContainer{
  --pc-text-container-spacing:var(--p-space-400);
}

.Polaris-TextContainer > *:not(:first-child){
    margin-top:var(--pc-text-container-spacing);
  }

.Polaris-TextContainer--spacingTight{
  --pc-text-container-spacing:var(--p-space-200);
}

.Polaris-TextContainer--spacingLoose{
  --pc-text-container-spacing:var(--p-space-500);
}


.Polaris-Layout{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  margin-top:calc(var(--p-space-400)*-1);
  margin-left:calc(var(--p-space-400)*-1);
}

@media print{
    body .Polaris-Layout{
      font-size:var(--p-font-size-300);
      line-height:var(--p-font-line-height-400);
    }

    .Polaris-Layout a,
    .Polaris-Layout button{
      color:var(--p-color-text);
    }
  }

.Polaris-Layout__Section{
  flex:var(--pg-layout-relative-size) var(--pg-layout-relative-size) var(--pg-layout-width-primary-min);
  min-width:51%;
}

@media print{

.Polaris-Layout__Section{
    flex:2 2 22.5rem;
}
  }

.Polaris-Layout__Section--fullWidth{
  flex:1 1 100%;
}

.Polaris-Layout__Section--oneHalf{
  flex:1 1 var(--pg-layout-width-one-half-width-base);
  min-width:0;
}

.Polaris-Layout__Section--oneThird{
  flex:1 1 var(--pg-layout-width-one-third-width-base);
  min-width:0;
}

.Polaris-Layout__AnnotatedSection{
  min-width:0;
  flex:1 1 100%;
}

.Polaris-Layout__Section,
.Polaris-Layout__AnnotatedSection{
  max-width:calc(100% - var(--p-space-400));
  margin-top:var(--p-space-400);
  margin-left:var(--p-space-400);
}

.Polaris-Layout__Section + .Polaris-Layout__AnnotatedSection, .Polaris-Layout__AnnotatedSection + .Polaris-Layout__AnnotatedSection{
    border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
    padding-top:var(--p-space-400);
  }

.Polaris-Layout__AnnotationWrapper{
  display:flex;
  flex-wrap:wrap;
  margin-top:calc(var(--p-space-400)*-1);
  margin-left:calc(var(--p-space-400)*-1);
}

.Polaris-Layout__AnnotationContent{
  flex:var(--pg-layout-relative-size) var(--pg-layout-relative-size) var(--pg-layout-width-primary-min);
}

.Polaris-Layout__Annotation{
  flex:1 1 var(--pg-layout-width-secondary-min);
  padding:var(--p-space-400) var(--p-space-400) 0 0;
}

@media (min-width: 48em){

.Polaris-Layout__Annotation{
    padding-bottom:var(--p-space-400);
}
  }

.Polaris-Layout__Annotation,
.Polaris-Layout__AnnotationContent{
  min-width:0;
  max-width:calc(100% - var(--p-space-400));
  margin-top:var(--p-space-400);
  margin-left:var(--p-space-400);
}


.Polaris-Tag{
  position:relative;
  display:inline-flex;
  max-width:100%;
  align-items:center;
  padding-inline:calc(var(--p-space-100) + var(--p-space-050));
  background-color:var(--p-color-bg-fill-tertiary);
  border-radius:var(--p-border-radius-200);
  color:var(--p-color-text);
}

.Polaris-Tag.Polaris-Tag--disabled{
    transition:none;
    background:var(--p-color-bg-fill-disabled);
    color:var(--p-color-text-disabled);
  }

.Polaris-Tag.Polaris-Tag--disabled svg{
      fill:var(--p-color-icon-disabled);
    }

.Polaris-Tag.Polaris-Tag--clickable{
    -webkit-appearance:none;
            appearance:none;
    margin:0;
    padding:0;
    background:none;
    border:none;
    font-size:inherit;
    line-height:inherit;
    color:inherit;
    cursor:pointer;
    cursor:pointer;
    padding:0 calc(var(--p-space-100) + var(--p-space-050));
    background-color:var(--p-color-bg-fill-tertiary);
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-Tag.Polaris-Tag--clickable:focus{
    outline:none;
  }

.Polaris-Tag.Polaris-Tag--clickable:hover{
      background:var(--p-color-bg-fill-tertiary-hover);
    }

.Polaris-Tag.Polaris-Tag--clickable{
    position: relative;
  }

.Polaris-Tag.Polaris-Tag--clickable::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-200);
}

.Polaris-Tag.Polaris-Tag--clickable:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Tag.Polaris-Tag--clickable:active{
      background:var(--p-color-bg-fill-tertiary-active);
    }

.Polaris-Tag.Polaris-Tag--clickable:disabled{
      background:var(--p-color-bg-fill-disabled);
      cursor:default;
      pointer-events:none;
      color:var(--p-color-text-disabled);
    }

.Polaris-Tag.Polaris-Tag--linkable:hover{
      background:var(--p-color-bg-fill-tertiary-hover);
    }

.Polaris-Tag.Polaris-Tag--linkable:active{
      background:var(--p-color-bg-fill-tertiary-active);
    }

.Polaris-Tag.Polaris-Tag--removable{
    padding-right:0;
    padding-inline-end:0;
  }

.Polaris-Tag__Button{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  display:block;
  flex-shrink:0;
  height:1.125rem;
  width:1.125rem;
  margin:var(--p-space-025);
  margin-left:var(--p-space-050);
  border-radius:0.4375rem;
  color:var(--p-color-icon-secondary);
}

.Polaris-Tag__Button:focus{
    outline:none;
  }

.Polaris-Tag__Button svg{
    fill:currentColor;
  }

.Polaris-Tag__Button:hover{
    background:var(--p-color-bg-fill-tertiary-hover);
    color:var(--p-color-icon-hover);
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-Tag__Button{
  position: relative;
}

.Polaris-Tag__Button::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-200);
}

.Polaris-Tag__Button:focus-visible{
    background:var(--p-color-bg-fill-tertiary-hover);
    color:var(--p-color-icon-hover);
  }

.Polaris-Tag__Button:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Tag__Button:active{
    background:var(--p-color-bg-fill-tertiary-active);
  }

.Polaris-Tag__Button:disabled{
    cursor:default;
    pointer-events:none;
  }

.Polaris-Tag__Button:disabled svg{
      fill:var(--p-color-icon-disabled);
    }

.Polaris-Tag__Link{
  display:inline-grid;
  color:var(--p-color-text);
  outline:none;
  border-radius:var(--p-border-radius-200);
  text-decoration:none;
  position: relative;
}

.Polaris-Tag__Link::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-200);
}

.Polaris-Tag__Link:focus-visible:not(:active){
    text-decoration:underline;
  }

.Polaris-Tag__Link:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Tag__Link:hover{
    background:var(--p-color-bg-fill-tertiary-hover);
    text-decoration:underline;
  }

.Polaris-Tag__Link.Polaris-Tag--segmented:hover{
      background:none;
    }

.Polaris-Tag__Link.Polaris-Tag--segmented::after{
      margin-right:var(--p-space-100);
    }

.Polaris-Tag__Link:active{
    background:var(--p-color-bg-fill-tertiary-active);
  }

.Polaris-Tag__Text{
  line-height:var(--p-font-line-height-500);
}

.Polaris-Tag--linkable.Polaris-Tag--removable:hover{
  background:var(--p-color-bg-fill-tertiary-hover);
}

.Polaris-Tag--linkable.Polaris-Tag--removable:hover .Polaris-Tag__Button{
    background:var(--p-color-bg-fill-tertiary-active);
  }

.Polaris-Tag--sizeLarge,
.Polaris-Tag--sizeLarge:is(.Polaris-Tag--removable, .Polaris-Tag--linkable){
  min-height:1.5rem;
  padding:0 var(--p-space-200);
}

@media (hover: none){

.Polaris-Tag--sizeLarge,
.Polaris-Tag--sizeLarge:is(.Polaris-Tag--removable, .Polaris-Tag--linkable){
    padding-right:0;
}
  }

.Polaris-Tag--sizeLarge .Polaris-Tag__Link.Polaris-Tag--segmented::after{
  margin-right:0;
}

.Polaris-Tag--sizeLarge .Polaris-Tag__Button{
  opacity:0;
  position:absolute;
  right:var(--p-space-050);
  left:auto;
  width:1.25rem;
  height:1.25rem;
  margin:0;
  background-color:var(--p-color-bg-fill-tertiary);
}

@media (hover: none){

.Polaris-Tag--sizeLarge .Polaris-Tag__Button{
    opacity:1;
    position:unset;
}
  }

.Polaris-Tag--sizeLarge .Polaris-Tag__Button:hover{
    color:var(--p-color-icon-secondary-hover);
  }

.Polaris-Tag--sizeLarge .Polaris-Tag__Button:active,
  .Polaris-Tag--sizeLarge .Polaris-Tag__Button:focus{
    color:var(--p-color-icon-secondary-active);
  }

.Polaris-Tag--sizeLarge:hover .Polaris-Tag__Button,
.Polaris-Tag--sizeLarge .Polaris-Tag__Button:focus-visible{
  opacity:1;
}

.Polaris-Tag--sizeLarge:hover .Polaris-Tag--overlay{
  position:absolute;
  top:0;
  right:1.25rem;
  bottom:0;
  width:0.75rem;
  pointer-events:none;
  background:linear-gradient(
    to left,
    var(--p-color-bg-fill-tertiary) 0%,
    transparent 100%
  );
}

.Polaris-Tag--sizeLarge.Polaris-Tag--removable.Polaris-Tag--linkable .Polaris-Tag__Button{
    background-color:var(--p-color-bg-fill-tertiary-hover);
  }

@media (hover: none){

.Polaris-Tag--sizeLarge.Polaris-Tag--removable.Polaris-Tag--linkable .Polaris-Tag__Button{
      background-color:var(--p-color-bg-fill-tertiary);
  }
    }

.Polaris-Tag--sizeLarge.Polaris-Tag--removable.Polaris-Tag--linkable:hover .Polaris-Tag--overlay{
    background:linear-gradient(
      to left,
      var(--p-color-bg-fill-tertiary-hover) 0%,
      transparent 100%
    );
  }


.Polaris-Sheet{
  position:fixed;
  bottom:0;
  width:100%;
  height:100%;
  background-color:var(--p-color-bg-surface);
  box-shadow:var(--p-shadow-600);
}

@media screen and (-ms-high-contrast: active){

.Polaris-Sheet{
    border-left:var(--p-border-width-025) solid var(--p-color-border-secondary);
}
  }

@media (min-width: 48em){

.Polaris-Sheet{
    right:0;
    width:var(--pc-sheet-desktop-width);
}
  }

.Polaris-Sheet:focus{
    outline:0;
  }

.Polaris-Sheet__Container{
  --pc-sheet-desktop-width:23.75rem;
  position:fixed;
  z-index:var(--p-z-index-11);
  top:0;
  right:0;
  bottom:0;
  left:0;
}

@media (min-width: 48em){

.Polaris-Sheet__Container{
    left:auto;
    width:var(--pc-sheet-desktop-width);
}
  }

.Polaris-Sheet__Bottom{
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:transform;
  transition:transform var(--p-motion-duration-300) var(--p-motion-ease);
  transform-origin:bottom;
}

.Polaris-Sheet--enterBottom{
  transform:translateY(100%);
}

.Polaris-Sheet--enterBottomActive{
  transform:translateY(0%);
}

.Polaris-Sheet--exitBottom{
  transform:translateY(0%);
}

.Polaris-Sheet--exitBottomActive{
  transform:translateY(100%);
}

.Polaris-Sheet__Right{
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:transform;
  transition:transform var(--p-motion-duration-300) var(--p-motion-ease);
  transform-origin:right;
}

.Polaris-Sheet--enterRight{
  transform:translateX(100%);
}

.Polaris-Sheet--enterRightActive{
  transform:translateX(0%);
}

.Polaris-Sheet--exitRight{
  transform:translateX(0%);
}

.Polaris-Sheet--exitRightActive{
  transform:translateX(100%);
}


.Polaris-LegacyFilters-ConnectedFilterControl{
  --pc-connceted-filter-control-item:10;
  --pc-connceted-filter-control-focused:20;
  display:flex;
  flex-grow:1;
  align-items:center;
}
.Polaris-LegacyFilters-ConnectedFilterControl .Polaris-LegacyFilters-ConnectedFilterControl__CenterContainer{
    flex:1 1 auto;
    min-width:6.25rem;
  }
.Polaris-LegacyFilters-ConnectedFilterControl.Polaris-LegacyFilters-ConnectedFilterControl--right .Polaris-LegacyFilters-ConnectedFilterControl__CenterContainer *{
      border-top-right-radius:var(--p-border-radius-200);
      border-bottom-right-radius:var(--p-border-radius-200);
    }
.Polaris-LegacyFilters-ConnectedFilterControl__Item{
  position:relative;
  z-index:var(--pc-connceted-filter-control-item);
}
.Polaris-LegacyFilters-ConnectedFilterControl__Item--focused{
  z-index:var(--pc-connceted-filter-control-focused);
}
.Polaris-LegacyFilters-ConnectedFilterControl__ProxyButtonContainer{
  position:absolute;
  top:-62.5rem;
  left:-62.5rem;
  display:flex;
  width:100%;
  height:0;
  visibility:hidden;
  overflow:hidden;
}
.Polaris-LegacyFilters-ConnectedFilterControl__ProxyButtonContainer > *{
    flex-shrink:0;
  }
.Polaris-LegacyFilters-ConnectedFilterControl__CenterContainer + .Polaris-LegacyFilters-ConnectedFilterControl__RightContainer,
.Polaris-LegacyFilters-ConnectedFilterControl__CenterContainer + .Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer{
  margin-left:var(--p-space-200);
}
.Polaris-LegacyFilters-ConnectedFilterControl__RightContainer{
  display:flex;
  flex-shrink:0;
}
.Polaris-LegacyFilters-ConnectedFilterControl__RightContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item > div > button{
    margin-right:calc(var(--p-space-025)*-1);
    border-radius:0;
  }
.Polaris-LegacyFilters-ConnectedFilterControl__RightContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item{
    flex-shrink:0;
  }
.Polaris-LegacyFilters-ConnectedFilterControl__RightContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item:first-of-type > div > button{
    border-top-left-radius:var(--p-border-radius-200);
    border-bottom-left-radius:var(--p-border-radius-200);
  }
.Polaris-LegacyFilters-ConnectedFilterControl__RightContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item:last-of-type > div > button{
    border-top-right-radius:var(--p-border-radius-200);
    border-bottom-right-radius:var(--p-border-radius-200);
  }
.Polaris-LegacyFilters-ConnectedFilterControl__RightContainer.Polaris-LegacyFilters-ConnectedFilterControl--queryFieldHidden .Polaris-LegacyFilters-ConnectedFilterControl__Item:first-of-type > div > button{
    border-top-left-radius:var(--p-border-radius-200);
    border-bottom-left-radius:var(--p-border-radius-200);
  }
.Polaris-LegacyFilters-ConnectedFilterControl__RightContainerWithoutMoreFilters .Polaris-LegacyFilters-ConnectedFilterControl__Item:last-child > div > button{
    border-top-right-radius:var(--p-border-radius-200);
    border-bottom-right-radius:var(--p-border-radius-200);
  }
.Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer{
  padding-left:var(--p-space-200);
}
.Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item > div > button{
    white-space:nowrap;
    border-top-left-radius:var(--p-border-radius-200);
    border-bottom-left-radius:var(--p-border-radius-200);
  }
.Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer.Polaris-LegacyFilters-ConnectedFilterControl--onlyButtonVisible{
  padding-left:0;
}
.Polaris-LegacyFilters-ConnectedFilterControl__MoreFiltersButtonContainer.Polaris-LegacyFilters-ConnectedFilterControl--onlyButtonVisible .Polaris-LegacyFilters-ConnectedFilterControl__Item > div > button{
    border-radius:var(--p-border-radius-200);
  }
.Polaris-LegacyFilters-ConnectedFilterControl__Wrapper{
  display:flex;
  align-items:center;
}
.Polaris-LegacyFilters-ConnectedFilterControl__AuxiliaryContainer{
  flex-grow:0;
  margin-left:var(--p-space-200);
}
@media (min-width: 48em){
.Polaris-LegacyFilters-ConnectedFilterControl__AuxiliaryContainer{
    margin-left:0;
}
  }


.Polaris-LegacyFilters{
  --pc-legacy-filters-header-height:var(--pg-top-bar-height);
  --pc-legacy-filters-footer-height:4.375rem;
  position:relative;
}

.Polaris-LegacyFilters__LegacyFiltersContainer{
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
}

.Polaris-LegacyFilters__LegacyFiltersContainerHeader{
  top:0;
  width:100%;
  padding:var(--p-space-400) var(--p-space-500);
  border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary);
  height:var(--pc-legacy-filters-header-height);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.Polaris-LegacyFilters__LegacyFiltersDesktopContainerContent{
  width:100%;
  height:calc(100% - var(--pc-legacy-filters-footer-height) - var(--pc-legacy-filters-header-height));
  padding:var(--p-space-200);
}

.Polaris-LegacyFilters__LegacyFiltersMobileContainerContent{
  width:100%;
  height:calc(100% - var(--pc-legacy-filters-header-height));
  padding:var(--p-space-200);
}

.Polaris-LegacyFilters__LegacyFiltersContainerFooter{
  position:absolute;
  bottom:0;
  width:100%;
  padding:var(--p-space-400) var(--p-space-500);
  border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
  height:var(--pc-legacy-filters-footer-height);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.Polaris-LegacyFilters__LegacyFiltersMobileContainerFooter{
  width:100%;
  padding:var(--p-space-400) var(--p-space-400);
  height:var(--pc-legacy-filters-footer-height);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.Polaris-LegacyFilters__EmptyFooterState{
  border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
  padding-top:var(--p-space-400);
  width:100%;
  display:flex;
  justify-content:center;
}

.Polaris-LegacyFilters__FilterTriggerContainer{
  position:relative;
}

.Polaris-LegacyFilters__FilterTrigger{
  width:100%;
  margin:0;
  padding:var(--p-space-400) var(--p-space-500);
  color:var(--p-color-text);
  border-radius:var(--p-border-radius-100);
  background:none;
  border:none;
  outline:none;
  position: relative;
}

.Polaris-LegacyFilters__FilterTrigger::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-LegacyFilters__FilterTrigger:focus{
    box-shadow:none;
  }

.Polaris-LegacyFilters__FilterTrigger:hover{
    cursor:pointer;
    background-color:var(--p-color-bg-surface-hover);
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-LegacyFilters__FilterTrigger:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-LegacyFilters__FilterTriggerTitle{
  font-size:0.9375rem;
  font-weight:var(--p-font-weight-semibold);
}

.Polaris-LegacyFilters__AppliedFilterBadgeContainer{
  padding-top:var(--p-space-100);
  display:flex;
}

.Polaris-LegacyFilters--open .Polaris-LegacyFilters__AppliedFilterBadgeContainer{
    display:none;
  }

.Polaris-LegacyFilters__FilterTriggerLabelContainer{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.Polaris-LegacyFilters--open::before,
  .Polaris-LegacyFilters--open::after{
    content:'';
    position:relative;
    left:var(--p-space-400);
    width:calc(100% - var(--p-space-800));
    height:var(--p-space-025);
    background-color:var(--p-color-bg-surface-tertiary);
    display:block;
  }

.Polaris-LegacyFilters--open::before{
    top:0;
  }

.Polaris-LegacyFilters--open::after{
    bottom:0;
  }

.Polaris-LegacyFilters--open.Polaris-LegacyFilters--first::after{
    content:'';
    bottom:0;
    position:relative;
    left:var(--p-space-400);
    width:calc(100% - var(--p-space-800));
    height:var(--p-space-025);
    background-color:var(--p-color-bg-surface-tertiary);
    display:block;
  }

.Polaris-LegacyFilters--open.Polaris-LegacyFilters--first::before{
    display:none;
  }

.Polaris-LegacyFilters--open ~ .Polaris-LegacyFilters--open::before{
    display:none;
  }

.Polaris-LegacyFilters--open.Polaris-LegacyFilters--last::before{
    content:'';
    top:0;
    position:relative;
    left:var(--p-space-400);
    width:calc(100% - var(--p-space-800));
    height:var(--p-space-025);
    background-color:var(--p-color-bg-surface-tertiary);
    display:block;
  }

.Polaris-LegacyFilters--open.Polaris-LegacyFilters--last::after{
    display:none;
  }

.Polaris-LegacyFilters--open + .Polaris-LegacyFilters--last::before{
    display:none;
  }

.Polaris-LegacyFilters__FilterNodeContainer{
  padding:var(--p-space-200) var(--p-space-500) var(--p-space-500) var(--p-space-500);
}

.Polaris-LegacyFilters__SearchIcon{
  fill:currentColor;
}

.Polaris-LegacyFilters__Backdrop{
  position:fixed;
  z-index:var(--p-z-index-10);
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:block;
  opacity:0;
}

.Polaris-LegacyFilters__HelpText{
  margin-top:var(--p-space-200);
}

.Polaris-LegacyFilters__TagsContainer{
  display:flex;
  padding-top:var(--p-space-200);
  flex-wrap:wrap;
}

.Polaris-LegacyFilters__TagsContainer > *{
    margin-right:var(--p-space-200);
    margin-bottom:var(--p-space-200);
  }


.Polaris-LegacyTabs{
  display:flex;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}

.Polaris-LegacyTabs--fitted{
  flex-wrap:nowrap;
}

.Polaris-LegacyTabs--fitted .Polaris-LegacyTabs__TabContainer{
    flex:1 1 100%;
  }

.Polaris-LegacyTabs--fitted .Polaris-LegacyTabs__Title{
    width:100%;
    padding:var(--p-space-150) var(--p-space-300);
  }

.Polaris-LegacyTabs--fillSpace .Polaris-LegacyTabs__TabContainer{
    flex:1 1 auto;
  }

.Polaris-LegacyTabs__TabContainer{
  display:flex;
  margin:0;
  padding:0;
}

.Polaris-LegacyTabs__Tab{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  color:var(--p-color-text);
  position:relative;
  justify-content:center;
  width:100%;
  min-width:100%;
  margin-top:var(--p-space-025);
  margin-bottom:calc(var(--p-space-025)*-1);
  padding:var(--p-space-200) var(--p-space-100);
  outline:none;
  text-align:center;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
}

.Polaris-LegacyTabs__Tab:focus{
    outline:none;
  }

.Polaris-LegacyTabs__Tab:hover{
    text-decoration:none;
  }

.Polaris-LegacyTabs__Tab:hover .Polaris-LegacyTabs__Title{
      color:var(--p-color-text-brand);
      background-color:transparent;
    }

.Polaris-LegacyTabs__Tab:hover .Polaris-LegacyTabs__Title::before{
        background-color:var(--p-color-bg-fill-tertiary-hover);
      }

.Polaris-LegacyTabs__Tab:active .Polaris-LegacyTabs__Title{
      background-color:transparent;
    }

.Polaris-LegacyTabs__Tab:active .Polaris-LegacyTabs__Title::before{
        background:var(--p-color-bg-fill-tertiary-active);
      }

.Polaris-LegacyTabs__Tab:focus-visible .Polaris-LegacyTabs__Title{
      color:var(--p-color-text-brand);
    }

.Polaris-LegacyTabs__Tab:focus-visible:not(:active) .Polaris-LegacyTabs__Title::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-LegacyTabs__Tab:visited{
    color:inherit;
  }

.Polaris-LegacyTabs__Tab--selected{
  color:var(--p-color-text-brand);
}

.Polaris-LegacyTabs__Tab--selected:focus .Polaris-LegacyTabs__Title{
    outline:var(--p-border-width-050) solid transparent;
  }

.Polaris-LegacyTabs__Tab--selected:focus .Polaris-LegacyTabs__Title::before{
      background:var(--p-color-bg-fill-brand);
    }

.Polaris-LegacyTabs__Tab--selected .Polaris-LegacyTabs__Title{
    outline:var(--p-border-width-050) solid transparent;
    color:var(--p-color-text-brand);
  }

.Polaris-LegacyTabs__Tab--selected .Polaris-LegacyTabs__Title::before{
      background:var(--p-color-bg-fill-brand);
    }

.Polaris-LegacyTabs__Title{
  position: relative;
  border-radius:var(--p-border-radius-100);
  display:block;
  padding:var(--p-space-150) var(--p-space-300);
  min-width:3.125rem;
  color:var(--p-color-text-brand);
}

.Polaris-LegacyTabs__Title::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-LegacyTabs__Title::before{
    content:'';
    position:absolute;
    bottom:calc(var(--p-space-200)*-1);
    left:0;
    right:0;
    height:var(--p-border-width-050);
    border-top-left-radius:var(--p-border-radius-100);
    border-top-right-radius:var(--p-border-radius-100);
  }

.Polaris-LegacyTabs--titleWithIcon{
  display:flex;
}

.Polaris-LegacyTabs__Panel{
  display:block;
}

.Polaris-LegacyTabs__Panel:focus{
    outline:none;
  }

.Polaris-LegacyTabs__Panel--hidden{
  display:none;
}

.Polaris-LegacyTabs__Item{
  --pc-legacy-tabs-item-min-height:1rem;
  --pc-legacy-tabs-item-vertical-padding:calc(var(--pc-legacy-tabs-item-min-height)*0.5);
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  position: relative;
  display:block;
  width:100%;
  min-height:var(--pc-legacy-tabs-item-min-height);
  padding:var(--pc-legacy-tabs-item-vertical-padding) var(--p-space-400);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  border-radius:var(--p-border-radius-100);
  color:inherit;
}

.Polaris-LegacyTabs__Item:focus{
    outline:none;
  }

.Polaris-LegacyTabs__Item::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-LegacyTabs__Item::-moz-focus-inner{
    border:none;
  }

.Polaris-LegacyTabs__Item:hover{
    background-color:var(--p-color-bg-surface-hover);
  }

.Polaris-LegacyTabs__Item:active{
    background-color:var(--p-color-bg-surface-brand-active);
  }

.Polaris-LegacyTabs__Item:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-LegacyTabs__Item:visited{
    color:inherit;
  }

.Polaris-LegacyTabs__DisclosureTab{
  display:none;
}

.Polaris-LegacyTabs__DisclosureTab--visible{
  display:flex;
}

.Polaris-LegacyTabs__DisclosureActivator{
  position: relative;
  height:100%;
  background-color:transparent;
  cursor:pointer;
  border:none;
  outline:none;
  margin:var(--p-space-025) var(--p-space-025) calc(var(--p-space-025)*-1) 0;
}

.Polaris-LegacyTabs__DisclosureActivator::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-LegacyTabs__DisclosureActivator:hover svg,
  .Polaris-LegacyTabs__DisclosureActivator:focus svg{
    fill:var(--p-color-icon);
  }

.Polaris-LegacyTabs__DisclosureActivator:focus-visible .Polaris-LegacyTabs__Title::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-LegacyTabs__DisclosureActivator:hover .Polaris-LegacyTabs__Title::before{
    background-color:var(--p-color-border-hover);
  }

.Polaris-LegacyTabs__TabMeasurer{
  display:flex;
  visibility:hidden;
  height:0;
}


.Polaris-Link{
  -webkit-appearance:none;
          appearance:none;
  display:inline;
  text-align:inherit;
  padding:0;
  background:none;
  border:0;
  font-size:inherit;
  font-weight:inherit;
  color:var(--p-color-text-link);
  text-decoration:underline;
  cursor:pointer;
  touch-action:manipulation;
}

.Polaris-Link:hover{
    color:var(--p-color-text-link-hover);
    text-decoration:underline;
  }

.Polaris-Link:focus,
  .Polaris-Link:focus-visible{
    outline:var(--p-color-border-focus) auto var(--p-border-width-050);
    outline-offset:var(--p-space-050);
    border-radius:var(--p-border-radius-150);
  }

.Polaris-Link:active{
    position:relative;
    color:var(--p-color-text-link-active);
  }

@media print{

.Polaris-Link{
    -webkit-text-decoration-color:var(--p-color-border-tertiary);
            text-decoration-color:var(--p-color-border-tertiary);
}
  }

.Polaris-Link--monochrome{
  color:inherit;
}

.Polaris-Link--monochrome:hover,
  .Polaris-Link--monochrome:focus,
  .Polaris-Link--monochrome:active{
    color:inherit;
  }

.Polaris-Link--removeUnderline{
  text-decoration:none;
}

.Polaris-Link--removeUnderline:hover{
    text-decoration:underline;
  }


.Polaris-List{
  padding-left:var(--p-space-500);
  margin-top:0;
  margin-bottom:0;
  list-style:disc outside none;
}

.Polaris-List + .Polaris-List{
    margin-top:var(--p-space-400);
  }

.Polaris-List--typeNumber{
  padding-left:var(--p-space-800);
  list-style:decimal outside none;
}

.Polaris-List__Item .Polaris-List:first-child{
    margin-top:var(--p-space-200);
  }

.Polaris-List--spacingLoose .Polaris-List__Item{
    margin-bottom:var(--p-space-100);
  }


.Polaris-MediaCard{
  height:100%;
  width:100%;
  display:flex;
  flex-flow:row wrap;
}

.Polaris-MediaCard.Polaris-MediaCard--portrait{
    flex-flow:column nowrap;
  }

@media (max-width: 47.9975em){

.Polaris-MediaCard{
    flex-flow:column nowrap;
}
  }

.Polaris-MediaCard__MediaContainer{
  overflow:hidden;
}

.Polaris-MediaCard__MediaContainer:not(.Polaris-MediaCard--portrait){
    flex-basis:40%;
  }

@media (min-width: 48em){

.Polaris-MediaCard__MediaContainer:not(.Polaris-MediaCard--portrait){
      border-top-right-radius:0;
      border-top-left-radius:var(--p-border-radius-200);
      border-bottom-left-radius:var(--p-border-radius-200);
  }
    }

.Polaris-MediaCard__MediaContainer.Polaris-MediaCard--sizeSmall:not(.Polaris-MediaCard--portrait){
      flex-basis:33%;
    }

@media (min-width: 30.625em){

.Polaris-MediaCard__MediaContainer{
    border-top-left-radius:var(--p-border-radius-200);
    border-top-right-radius:var(--p-border-radius-200);
}
  }

.Polaris-MediaCard__InfoContainer{
  position:relative;
}

.Polaris-MediaCard__InfoContainer:not(.Polaris-MediaCard--portrait){
    flex-basis:60%;
  }

.Polaris-MediaCard__InfoContainer.Polaris-MediaCard--sizeSmall:not(.Polaris-MediaCard--portrait){
      flex-basis:67%;
    }

.Polaris-MediaCard__ActionContainer{
  padding-top:var(--p-space-200);
}

.Polaris-MediaCard__ActionContainer.Polaris-MediaCard--portrait{
    padding-top:var(--p-space-200);
  }

@media (max-width: 47.9975em){

.Polaris-MediaCard__ActionContainer{
    padding-top:var(--p-space-200);
}
  }


.Polaris-Navigation{
  --pc-navigation-mobile-height:2.5rem;
  --pc-navigation-desktop-height:1.75rem;
  --pc-navigation-icon-size:1.25rem;
  --pc-navigation-item-line-height:2.5rem;
  --pc-navigation-letter-spacing-medium:-0.005rem;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:var(--pg-mobile-nav-width);
  min-width:var(--pg-layout-width-nav-base);
  max-width:22.5rem;
  height:100%;
  min-height:100%;
  background-color:var(--p-color-nav-bg);
  -webkit-overflow-scrolling:touch;
  border-right:0;
  padding-bottom: 0;
  padding-bottom: calc(constant(safe-area-inset-bottom));
  padding-bottom: calc(env(safe-area-inset-bottom));
}

.Polaris-Navigation:focus{
    outline:none;
  }

@media (min-width: 48em){

.Polaris-Navigation{
    max-width:var(--pg-layout-width-nav-base);
    max-width: var(--pg-layout-width-nav-base);
    max-width: calc(var(--pg-layout-width-nav-base) + constant(safe-area-inset-left));
    max-width: calc(var(--pg-layout-width-nav-base) + env(safe-area-inset-left));
}
  }

.Polaris-Navigation__UserMenu{
  flex:0 0 auto;
}

.Polaris-Navigation__ContextControl{
  background-color:var(--p-color-bg-inverse);
  margin-bottom:var(--p-space-400);
  min-height:var(--pg-top-bar-height);
}

@media (min-width: 48em){

.Polaris-Navigation__ContextControl{
    display:none;
}
  }

.Polaris-Navigation__PrimaryNavigation{
  display:flex;
  overflow:auto;
  flex:1 1 auto;
  flex-direction:column;
  align-items:stretch;
  max-width:100%;
  padding-top:var(--p-space-100);
  scrollbar-width:thin;
  scrollbar-gutter:stable;
  scrollbar-color:var(--p-color-nav-bg) transparent;
  transition:scrollbar-color var(--p-motion-duration-100) var(--p-motion-ease-in);
}

@media (min-width: 48em){

.Polaris-Navigation__PrimaryNavigation{
    padding-top:var(--p-space-400);
}
  }

.Polaris-Navigation__PrimaryNavigation:focus{
    outline:none;
  }

.Polaris-Navigation__PrimaryNavigation::-webkit-scrollbar{
    width:0.6875rem;
    opacity:0;
  }

.Polaris-Navigation__PrimaryNavigation::-webkit-scrollbar-thumb{
    background-color:var(--p-color-scrollbar-thumb-bg-hover);
    border:var(--p-border-width-050) solid transparent;
    border-radius:var(--p-border-radius-300);
    background-clip:content-box;
  }

.Polaris-Navigation__PrimaryNavigation:hover{
    scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) transparent;
    background-color:var(--p-color-nav-bg);
  }

.Polaris-Navigation__PrimaryNavigation:hover::-webkit-scrollbar{
      opacity:1;
    }

.Polaris-Navigation__LogoContainer{
  display:none;
}

@media (max-width: 47.9975em){

.Polaris-Navigation__LogoContainer{
    display:flex;
    flex:0 0 var(--pg-top-bar-height);
    align-items:center;
    height:var(--pg-top-bar-height);
    padding:0 var(--p-space-200) 0 var(--p-space-400);
    background-color:var(--p-color-bg-inverse);
    box-shadow:var(--p-shadow-200);
    margin-bottom:var(--p-space-400);
    flex-basis: var(--pg-top-bar-height);
    flex-basis: calc(var(--pg-top-bar-height) + constant(safe-area-inset-left));
    flex-basis: calc(var(--pg-top-bar-height) + env(safe-area-inset-left));
    padding-left: var(--p-space-400);
    padding-left: calc(var(--p-space-400) + constant(safe-area-inset-left));
    padding-left: calc(var(--p-space-400) + env(safe-area-inset-left));
}
  }

.Polaris-Navigation__LogoContainer.Polaris-Navigation--hasLogoSuffix{
    gap:var(--p-space-200);
  }

.Polaris-Navigation__Logo,
.Polaris-Navigation__LogoLink{
  display:block;
}

.Polaris-Navigation__Item{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  display:flex;
  flex-grow:1;
  align-items:flex-start;
  max-width:100%;
  padding:0 var(--p-space-100) 0 var(--p-space-200);
  margin:0;
  color:var(--p-color-text);
  text-decoration:none;
  text-align:left;
  position: relative;
  position:relative;
}

.Polaris-Navigation__Item:focus{
    outline:none;
  }

.Polaris-Navigation__Item::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Navigation__Item:focus-visible{
    background:var(--p-color-bg-surface-hover);
    color:var(--p-color-text);
    text-decoration:none;
  }

.Polaris-Navigation__Item:focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Navigation__Item:focus-visible:not(:active){
    z-index:var(--p-z-index-1);
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
  }

.Polaris-Navigation__Item:focus-visible:not(:active)::after{
    content:none;
  }

.Polaris-Navigation__Item:active,
  .Polaris-Navigation__Item:active:hover{
    color:var(--p-color-text);
    background-color:var(--p-color-nav-bg-surface-selected);
  }

.Polaris-Navigation__Item:active::after, .Polaris-Navigation__Item:active:hover::after{
    content:none;
  }

.Polaris-Navigation__Item::-moz-focus-inner{
    border:0;
  }

.Polaris-Navigation__Item svg,
  .Polaris-Navigation__Item img{
    display:block;
    height:var(--p-space-500);
    width:var(--p-space-500);
  }

.Polaris-Navigation__Item .Polaris-Navigation__Icon--resized svg,
    .Polaris-Navigation__Item .Polaris-Navigation__Icon--resized img{
      margin:var(--p-space-050);
      height:var(--p-space-400);
      width:var(--p-space-400);
    }

.Polaris-Navigation__Item .Polaris-Navigation__Icon--resized img{
      border-radius:var(--p-border-radius-100);
    }

.Polaris-Navigation__Item:is(:hover, :focus-visible){
    background-color:transparent;
    color:var(--p-color-text);
    text-decoration:none;
  }

.Polaris-Navigation__Item .Polaris-Navigation__Badge{
    margin-right:0;
  }

.Polaris-Navigation__Item::before{
    opacity:0;
  }

.Polaris-Navigation__Item,
.Polaris-Navigation__ItemInnerWrapper{
  border-radius:var(--p-border-radius-200);
  transition:background-color var(--p-motion-duration-150) var(--p-motion-ease-out);
}

.Polaris-Navigation__ItemWrapper{
  --secondary-actions-on-hover-background-color:var(
    --p-color-nav-bg-surface-hover
  );
  width:100%;
  padding:0 var(--p-space-300);
}

@supports (scrollbar-gutter: stable){

.Polaris-Navigation__ItemWrapper{
    padding:0 calc(var(--p-space-300) - var(--pc-app-provider-scrollbar-width)) 0 var(--p-space-300);
}
  }

.Polaris-Navigation__ItemInnerWrapper{
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  transition:background-color var(--p-motion-duration-150) var(--p-motion-ease-out);
}

.Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation__ItemInnerDisabled{
    pointer-events:none;
  }

.Polaris-Navigation__ItemInnerWrapper:is(:hover, :focus-visible){
    background:var(--p-color-nav-bg-surface-hover);
  }

@media (min-width: 48em){
        .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:hover, :focus-visible) .Polaris-Navigation__SecondaryActions{
          background:var(--secondary-actions-on-hover-background-color);
        }

          .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:hover, :focus-visible) .Polaris-Navigation__SecondaryActions::before{
            background:linear-gradient(
              to right,
              rgba(0, 0, 0, 0),
              var(--p-color-nav-bg-surface-hover) var(--p-space-800)
            );
          }
        .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:active) .Polaris-Navigation__SecondaryActions{
          background:var(--p-color-nav-bg-surface-active);
        }
    }

.Polaris-Navigation__ItemInnerWrapper:active{
    background-color:var(--p-color-nav-bg-surface-active);
  }

@media (min-width: 48em){
          .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:active .Polaris-Navigation__SecondaryActions::before{
            background:linear-gradient(
              to right,
              rgba(0, 0, 0, 0),
              var(--p-color-nav-bg-surface-active) var(--p-space-800)
            );
          }
      }

.Polaris-Navigation__ItemInnerWrapper--selected{
  background-color:var(--p-color-nav-bg-surface-selected);
}

.Polaris-Navigation__ItemInnerWrapper--selected .Polaris-Navigation__Text{
    color:var(--p-color-text);
  }

.Polaris-Navigation__ItemInnerWrapper--selected:is(:hover, :focus-visible, :focus-within){
    background:var(--p-color-nav-bg-surface-selected);
  }

@media (min-width: 48em){
        .Polaris-Navigation__ItemInnerWrapper--selected.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:hover, :focus-visible, :focus-within) .Polaris-Navigation__SecondaryActions{
          background:var(--p-color-nav-bg-surface-selected);
        }

          .Polaris-Navigation__ItemInnerWrapper--selected.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:is(:hover, :focus-visible, :focus-within) .Polaris-Navigation__SecondaryActions::before{
            background:linear-gradient(
              to right,
              rgba(0, 0, 0, 0),
              var(--p-color-nav-bg-surface-selected) var(--p-space-800)
            );
          }
      }

.Polaris-Navigation__ItemInnerWrapper--selected:active{
    background:var(--p-color-nav-bg-surface-active);
  }

.Polaris-Navigation__ItemInnerWrapper--selected .Polaris-Navigation__SecondaryActions{
    background:var(--p-color-nav-bg-surface-selected);
    border-top-right-radius:var(--p-border-radius-200);
    border-bottom-right-radius:var(--p-border-radius-200);
  }

.Polaris-Navigation__ItemInnerWrapper--selected .Polaris-Navigation__SecondaryActions::before{
      background:linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        var(--p-color-nav-bg-surface-selected) var(--p-space-800)
      );
    }

.Polaris-Navigation__ItemInnerWrapper--open{
  background-color:transparent;
}

.Polaris-Navigation__ItemInnerWrapper--open:active{
    background:var(--p-color-nav-bg-surface-active);
  }

@media (min-width: 48em){
      .Polaris-Navigation__ItemInnerWrapper--open.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover .Polaris-Navigation__SecondaryActions{
        background:var(--secondary-actions-on-hover-background-color);
      }

        .Polaris-Navigation__ItemInnerWrapper--open.Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover .Polaris-Navigation__SecondaryActions::before{
          background:linear-gradient(
            to right,
            rgba(0, 0, 0, 0),
            var(--secondary-actions-on-hover-background-color)
              var(--p-space-800)
          );
        }
    }

.Polaris-Navigation__Item--selected{
  color:var(--p-color-text);
  outline:var(--p-border-width-025) solid transparent;
}

.Polaris-Navigation__Item--selected::before{
    content:'';
    position:absolute;
    top:0.0625rem;
    bottom:0.0625rem;
    left:calc(var(--p-space-200)*-1);
    width:0.1875rem;
    background-color:transparent;
    border-top-right-radius:var(--p-border-radius-100);
    border-bottom-right-radius:var(--p-border-radius-100);
  }

.Polaris-Navigation__Item--selected{
  position: relative;
}

.Polaris-Navigation__Item--selected::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Navigation__Item--selected:hover,
  .Polaris-Navigation__Item--selected:focus-visible{
    color:var(--p-color-text-brand-hover);
  }

.Polaris-Navigation__Item--selected :focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Navigation__Item--selected:active,
  .Polaris-Navigation__Item--selected:active:hover{
    color:var(--p-color-text-brand);
    background-color:var(--p-color-nav-bg-surface-active);
  }

.Polaris-Navigation__Item--selected:active::after, .Polaris-Navigation__Item--selected:active:hover::after{
    content:none;
  }

.Polaris-Navigation--itemChildActive::before{
    content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9%2024.75C9%2024.3358%209.33579%2024%209.75%2024V24C10.1642%2024%2010.5%2024.3358%2010.5%2024.75V28H9V24.75Z%22%20fill%3D%22%23B5B5B5%22%2F%3E%0A%3C%2Fsvg%3E');

    position:absolute;
    top:var(--p-space-200);
    left:var(--p-space-200);
    width:1.3125rem;
    height:2rem;
    border-radius:0;
    opacity:1;
    transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out);
  }

@media (min-width: 48em){

.Polaris-Navigation--itemChildActive::before{
      top:0;
      height:1.75rem;
  }
    }

.Polaris-Navigation__Item--disabled{
  color:var(--p-color-text-disabled);
}

.Polaris-Navigation__Item--disabled .Polaris-Navigation__Text{
    opacity:0.6;
  }

.Polaris-Navigation__Item--disabled .Polaris-Navigation__Icon{
    opacity:0.4;
  }

.Polaris-Navigation__Badge{
  margin-left:var(--p-space-200);
  display:inline-flex;
  height:var(--p-font-line-height-500);
  margin-top:var(--p-space-200);
  margin-right:var(--p-space-100);
}

@media (min-width: 48em){

.Polaris-Navigation__Badge{
    margin:var(--p-space-100);
    margin-right:var(--p-space-100);
    margin-top:var(--p-space-100);
}
  }

.Polaris-Navigation__ListItem--hasAction .Polaris-Navigation__Badge{
  margin-right:var(--p-space-100);
}

.Polaris-Navigation__Icon{
  --pc-navigation-filter-icon:brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%);
  --pc-navigation-filter-icon-action-primary:invert(10%) sepia(11%) saturate(0%) hue-rotate(159deg) brightness(105%) contrast(102%);
  --pc-navigation-filter-icon-on-interactive:brightness(0) saturate(100%) invert(100%);
  flex-shrink:0;
  align-self:flex-start;
  width:1.25rem;
  height:1.25rem;
  margin-top:var(--p-space-200);
  margin-right:var(--p-space-200);
  margin-bottom:var(--p-space-200);
}

@media (min-width: 48em){

.Polaris-Navigation__Icon{
    margin-top:var(--p-space-100);
    margin-right:var(--p-space-200);
    margin-bottom:var(--p-space-100);
}
  }

.Polaris-Navigation__Icon svg{
    fill:var(--p-color-icon);
  }

.Polaris-Navigation__Icon img{
    filter:var(--pc-navigation-filter-icon);
  }

.Polaris-Navigation__Item:hover .Polaris-Navigation__Icon svg, .Polaris-Navigation__Item:focus-visible .Polaris-Navigation__Icon svg{
      fill:var(--p-color-icon);
    }

.Polaris-Navigation__Item:hover .Polaris-Navigation__Icon img, .Polaris-Navigation__Item:focus-visible .Polaris-Navigation__Icon img{
      filter:var(--pc-navigation-filter-icon);
    }

.Polaris-Navigation__Item--selected .Polaris-Navigation__Icon svg, .Polaris-Navigation__Item--selected:hover .Polaris-Navigation__Icon svg, .Polaris-Navigation--subNavigationActive .Polaris-Navigation__Icon svg, .Polaris-Navigation--subNavigationActive:hover .Polaris-Navigation__Icon svg, .Polaris-Navigation--itemChildActive .Polaris-Navigation__Icon svg, .Polaris-Navigation--itemChildActive:hover .Polaris-Navigation__Icon svg, .Polaris-Navigation__Item--selected:focus-visible .Polaris-Navigation__Icon svg{
      fill:var(--p-color-icon-brand);
    }

.Polaris-Navigation__Item--selected .Polaris-Navigation__Icon img, .Polaris-Navigation__Item--selected:hover .Polaris-Navigation__Icon img, .Polaris-Navigation--subNavigationActive .Polaris-Navigation__Icon img, .Polaris-Navigation--subNavigationActive:hover .Polaris-Navigation__Icon img, .Polaris-Navigation--itemChildActive .Polaris-Navigation__Icon img, .Polaris-Navigation--itemChildActive:hover .Polaris-Navigation__Icon img, .Polaris-Navigation__Item--selected:focus-visible .Polaris-Navigation__Icon img{
      filter:var(--pc-navigation-filter-icon-action-primary);
    }

.Polaris-Navigation__Icon svg{
    display:block;
  }

.Polaris-Navigation__ListItem{
  position:relative;
  display:flex;
  flex-wrap:wrap;
}

.Polaris-Navigation__RollupSection .Polaris-Navigation__ListItem,
  .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__ListItem{
    opacity:1;
  }

.Polaris-Navigation__ListItem:nth-child(1) {
  animation-delay: 0ms;
}

.Polaris-Navigation__ListItem:nth-child(2) {
  animation-delay: 50ms;
}

.Polaris-Navigation__ListItem:nth-child(3) {
  animation-delay: 100ms;
}

.Polaris-Navigation__ListItem:nth-child(4) {
  animation-delay: 150ms;
}

.Polaris-Navigation__ListItem:nth-child(5) {
  animation-delay: 200ms;
}

.Polaris-Navigation__ListItem:nth-child(6) {
  animation-delay: 250ms;
}

.Polaris-Navigation__ListItem:nth-child(7) {
  animation-delay: 300ms;
}

.Polaris-Navigation__ListItem:nth-child(8) {
  animation-delay: 350ms;
}

.Polaris-Navigation__ListItem:nth-child(9) {
  animation-delay: 400ms;
}

.Polaris-Navigation__ListItem:nth-child(10) {
  animation-delay: 450ms;
}

.Polaris-Navigation__ListItem:nth-child(11) {
  animation-delay: 500ms;
}

.Polaris-Navigation__ListItem:nth-child(12) {
  animation-delay: 550ms;
}

.Polaris-Navigation__ListItem:not(:first-child) .Polaris-Navigation__ItemInnerWrapper{
      border-top:0;
    }

.Polaris-Navigation__ListItem--hasAction .Polaris-Navigation__Item{
  max-width:calc(100% - var(--pc-navigation-icon-size) + var(--p-space-400)*2 + var(--p-space-100));
}

.Polaris-Navigation__Text{
  flex:1 1 auto;
  margin-top:var(--p-space-150);
  margin-bottom:var(--p-space-150);
}

@media (min-width: 48em){

.Polaris-Navigation__Text{
    margin-top:var(--p-space-100);
    margin-bottom:var(--p-space-100);
}
  }

.Polaris-Navigation__Text--truncated{
  display:-webkit-box;
  overflow:hidden;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  word-break:break-all;
}

.Polaris-Navigation__SecondaryActions{
  display:flex;
  align-items:center;
  height:calc(var(--pc-navigation-mobile-height) - var(--p-space-100));
}

.Polaris-Navigation__SecondaryActions:last-child{
    margin-right:var(--p-space-050);
  }

@media (min-width: 48em){

.Polaris-Navigation__SecondaryActions{
    height:var(--pc-navigation-desktop-height);
}
  }

.Polaris-Navigation__ItemWithFloatingActions{
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  width:100%;
}

@media (min-width: 48em){
    .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover .Polaris-Navigation__SecondaryActions{
      position:absolute;
      top:0;
      right:0;
      z-index:var(--p-z-index-2);
      background:var(--p-color-nav-bg-surface-hover);
      visibility:hidden;
      opacity:0;
      transition:none;
      border-top-right-radius:var(--p-border-radius-200);
      border-bottom-right-radius:var(--p-border-radius-200);
      margin-right:0;
      padding:0 var(--p-space-050);
    }

      .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover .Polaris-Navigation__SecondaryActions::before{
        content:'';
        pointer-events:none;
        position:absolute;
        right:100%;
        display:block;
        height:100%;
        width:var(--p-space-800);
        background:linear-gradient(
          to right,
          rgba(0, 0, 0, 0),
          var(--p-color-nav-bg-surface-hover) var(--p-space-800)
        );
      }
      .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:focus-within .Polaris-Navigation__SecondaryActions, .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:hover .Polaris-Navigation__SecondaryActions{
        visibility:visible;
        opacity:1;
      }
      .Polaris-Navigation--itemInnerWrapperDisplayActionsOnHover:active .Polaris-Navigation__SecondaryActions{
        background-color:var(--p-color-nav-bg-surface-active);
      }
  }

.Polaris-Navigation__SecondaryAction[type='button']{
  cursor:pointer;
  background:none;
}

.Polaris-Navigation__SecondaryAction{
  display:flex;
  align-items:center;
  height:calc(100% - var(--p-space-100));
  padding:calc(var(--p-space-200) - var(--p-space-050)) var(--p-space-200);
  border-radius:var(--p-border-radius-200);
  border:none;
}

.Polaris-Navigation__SecondaryAction:focus-visible:not(:active){
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
  }

.Polaris-Navigation__SecondaryAction:focus-visible:not(:active)::after{
    content:none;
  }

.Polaris-Navigation__SecondaryAction svg{
    fill:var(--p-color-icon);
  }

@media (min-width: 48em){

.Polaris-Navigation__SecondaryAction{
    height:calc(100% - var(--p-space-100));
    padding:calc(var(--p-space-100) - var(--p-space-050));
}
  }

.Polaris-Navigation__SecondaryAction:hover,
  .Polaris-Navigation__SecondaryAction:focus,
  .Polaris-Navigation__SecondaryAction:active{
    background-color:var(--p-color-bg-fill-transparent-hover);
  }

.Polaris-Navigation__SecondaryAction:hover svg, .Polaris-Navigation__SecondaryAction:focus svg, .Polaris-Navigation__SecondaryAction:active svg{
      fill:var(--p-color-icon-hover);
    }

@media (-ms-high-contrast: active){
      .Polaris-Navigation__SecondaryAction:hover svg, .Polaris-Navigation__SecondaryAction:focus svg, .Polaris-Navigation__SecondaryAction:active svg{
        fill:#ffffff;
      }
    }

.Polaris-Navigation__SecondaryAction{
  position: relative;
}

.Polaris-Navigation__SecondaryAction::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Navigation__SecondaryAction:focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Navigation__SecondaryAction:active::after{
    content:none;
  }

.Polaris-Navigation__SecondaryAction:active svg{
      fill:var(--p-color-icon-active);
    }

.Polaris-Navigation__SecondaryAction:focus,
  .Polaris-Navigation__SecondaryAction:active{
    outline:none;
  }

.Polaris-Navigation__SecondaryNavigation{
  flex-basis:100%;
  margin-left:0;
  overflow-x:visible;
}

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__List{
    margin:0;
    padding:0;
    list-style:none;
    margin-bottom:var(--p-space-200);
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item{
    position:relative;
    padding-left:calc(var(--p-space-800) + var(--p-space-100));
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item::before,
    .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item::after{
      content:'';
      position:absolute;
      top:0;
      left:var(--p-space-200);
      width:1.3125rem;
      height:2rem;
      border-radius:0;
      opacity:0;
      transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out);
    }

@media (min-width: 48em){

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item::before,
    .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item::after{
        height:1.75rem;
    }
      }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:is(:hover, :focus-visible, :focus-within){
      background:var(--p-color-nav-bg);
      color:var(--p-color-text-brand);
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:hover{
      color:var(--p-color-text);
      background:var(--p-color-nav-bg-surface-hover);
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active,
    .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active:hover{
      background-color:var(--p-color-nav-bg-surface-active);
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active::after, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active:hover::after{
    content:none;
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item:active{
      color:var(--p-color-text-brand);
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Text{
    margin-top:var(--p-space-100);
    margin-bottom:var(--p-space-100);
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected{
    border-radius:var(--p-border-radius-200);
    color:var(--p-color-text);
    position: relative;
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:is(:hover, :focus-visible, :focus-within){
      background:var(--p-color-nav-bg-surface-selected);
      color:var(--p-color-text-brand);
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active,
    .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active:hover{
      background:var(--p-color-nav-bg-surface-active);
      color:var(--p-color-text-brand);
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active::after, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active:hover::after{
    content:none;
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:hover{
      color:var(--p-color-text-brand-hover);
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:focus-visible{
      color:var(--p-color-text-brand);
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active{
      color:var(--p-color-text-brand);
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--selected:active::after{
    content:none;
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--disabled{
    color:var(--p-color-text-disabled);
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--line::before, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--line.Polaris-Navigation--itemHoverLine::before{
      opacity:1;
      background:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%229%22%20width%3D%221.5%22%20height%3D%2228%22%20fill%3D%22%23B5B5B5%22%2F%3E%3C%2Fsvg%3E');
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemLinePointer::before, .Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemLinePointer.Polaris-Navigation--itemHoverPointer::before{
      opacity:1;
      content:url("data:image/svg+xml,%3Csvg%20width%3D'21'%20height%3D'28'%20viewBox%3D'0%200%2021%2028'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%2014.25H19.75V15.75H19V14.25ZM10.077%2013.362L10.7452%2013.0215V13.0215L10.077%2013.362ZM11.388%2014.673L11.7285%2014.0048H11.7285L11.388%2014.673ZM10.5%200V10.2H9V0H10.5ZM14.55%2014.25H19V15.75H14.55V14.25ZM10.5%2010.2C10.5%2011.0525%2010.5006%2011.6467%2010.5384%2012.1093C10.5755%2012.5632%2010.6446%2012.824%2010.7452%2013.0215L9.40873%2013.7025C9.18239%2013.2582%209.08803%2012.7781%209.04336%2012.2315C8.99942%2011.6936%209%2011.0277%209%2010.2H10.5ZM14.55%2015.75C13.7223%2015.75%2013.0564%2015.7506%2012.5185%2015.7066C11.9719%2015.662%2011.4918%2015.5676%2011.0475%2015.3413L11.7285%2014.0048C11.926%2014.1054%2012.1868%2014.1745%2012.6407%2014.2116C13.1033%2014.2494%2013.6975%2014.25%2014.55%2014.25V15.75ZM10.7452%2013.0215C10.9609%2013.4448%2011.3052%2013.7891%2011.7285%2014.0048L11.0475%2015.3413C10.3419%2014.9817%209.76825%2014.4081%209.40873%2013.7025L10.7452%2013.0215Z'%20fill%3D'%23B5B5B5'/%3E%3Cpath%20d%3D'M17%2012L20%2015L17%2018'%20stroke%3D'%23B5B5B5'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E%0A");
    }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemHoverLine::before{
    opacity:1;
    content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9%200H10.5V28H9V0Z%22%20fill%3D%22%23B5B5B5%22%2F%3E%0A%3C%2Fsvg%3E');
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemHoverPointer::before{
    opacity:1;
    content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9%207.75C9%207.33579%209.33579%207%209.75%207V7C10.1642%207%2010.5%207.33579%2010.5%207.75V9.95C10.5%2010.8025%2010.5006%2011.3967%2010.5384%2011.8593C10.5755%2012.3132%2010.6446%2012.574%2010.7452%2012.7715C10.961%2013.1948%2011.3052%2013.539%2011.7285%2013.7548C11.926%2013.8554%2012.1868%2013.9245%2012.6407%2013.9616C13.1033%2013.9994%2013.6975%2014%2014.55%2014H17.9393L16.2197%2012.2803C15.9268%2011.9874%2015.9268%2011.5126%2016.2197%2011.2197C16.5126%2010.9268%2016.9874%2010.9268%2017.2803%2011.2197L20.2803%2014.2197C20.5732%2014.5126%2020.5732%2014.9874%2020.2803%2015.2803L17.2803%2018.2803C16.9874%2018.5732%2016.5126%2018.5732%2016.2197%2018.2803C15.9268%2017.9874%2015.9268%2017.5126%2016.2197%2017.2197L17.9393%2015.5H14.5179C13.705%2015.5%2013.0494%2015.5%2012.5185%2015.4566C11.9719%2015.412%2011.4918%2015.3176%2011.0475%2015.0913C10.3419%2014.7317%209.76825%2014.1581%209.40873%2013.4525C9.18239%2013.0082%209.08803%2012.5281%209.04336%2011.9815C8.99999%2011.4506%208.99999%2010.795%209%209.98212V7.75Z%22%20fill%3D%22%23CCCCCC%22%2F%3E%0A%3C%2Fsvg%3E');
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--line.Polaris-Navigation--itemHoverPointer::before{
    opacity:1;
    content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9%200H10.5V28H9V0Z%22%20fill%3D%22%23B5B5B5%22%2F%3E%0A%3C%2Fsvg%3E');
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation__Item--line.Polaris-Navigation--itemHoverPointer::after{
    opacity:1;
    content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.5%2015.2751C11.8158%2015.3745%2012.1522%2015.4267%2012.5185%2015.4566C13.0494%2015.5%2013.705%2015.5%2014.5179%2015.5H17.9393L16.2197%2017.2197C15.9268%2017.5126%2015.9268%2017.9874%2016.2197%2018.2803C16.5126%2018.5732%2016.9874%2018.5732%2017.2803%2018.2803L20.2803%2015.2803C20.5732%2014.9874%2020.5732%2014.5126%2020.2803%2014.2197L17.2803%2011.2197C16.9874%2010.9268%2016.5126%2010.9268%2016.2197%2011.2197C15.9268%2011.5126%2015.9268%2011.9874%2016.2197%2012.2803L17.9393%2014H14.55C13.6975%2014%2013.1033%2013.9994%2012.6407%2013.9616C12.1868%2013.9245%2011.926%2013.8554%2011.7285%2013.7548C11.6495%2013.7145%2011.5732%2013.6697%2011.5%2013.6208V15.2751Z%22%20fill%3D%22%23CCCCCC%22%2F%3E%0A%3C%2Fsvg%3E');
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemLinePointer.Polaris-Navigation--itemHoverLine::before{
    opacity:1;
    content:url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200.75V0H10.5V0.75V9.95C10.5%2010.8025%2010.5006%2011.3967%2010.5384%2011.8593C10.5755%2012.3132%2010.6446%2012.574%2010.7452%2012.7715C10.961%2013.1948%2011.3052%2013.539%2011.7285%2013.7548C11.926%2013.8554%2012.1868%2013.9245%2012.6407%2013.9616C13.1033%2013.9994%2013.6975%2014%2014.55%2014H17.9393L16.2197%2012.2803C15.9268%2011.9874%2015.9268%2011.5126%2016.2197%2011.2197C16.5126%2010.9268%2016.9874%2010.9268%2017.2803%2011.2197L20.2803%2014.2197C20.5732%2014.5126%2020.5732%2014.9874%2020.2803%2015.2803L17.2803%2018.2803C16.9874%2018.5732%2016.5126%2018.5732%2016.2197%2018.2803C15.9268%2017.9874%2015.9268%2017.5126%2016.2197%2017.2197L17.9393%2015.5H14.55H14.5179C13.705%2015.5%2013.0494%2015.5%2012.5185%2015.4566C11.9719%2015.412%2011.4918%2015.3176%2011.0475%2015.0913C10.3419%2014.7317%209.76825%2014.1581%209.40873%2013.4525C9.18239%2013.0082%209.08803%2012.5281%209.04336%2011.9815C8.99999%2011.4506%208.99999%2010.795%209%209.98212V9.95V0.75Z%22%20fill%3D%22%23B5B5B5%22%2F%3E%0A%3C%2Fsvg%3E');
  }

.Polaris-Navigation__SecondaryNavigation .Polaris-Navigation--itemLinePointer.Polaris-Navigation--itemHoverLine::after{
    opacity:1;
  }

.Polaris-Navigation__SecondaryNavigation--noIcon .Polaris-Navigation__Item{
    padding-left:var(--p-space-600);
  }

.Polaris-Navigation__Section{
  flex:0 0 auto;
  margin:0;
  padding:var(--p-space-400) 0;
  padding-top:0;
  padding-left: 0;
  padding-left: calc(constant(safe-area-inset-left));
  padding-left: calc(env(safe-area-inset-left));
  list-style:none;
}

.Polaris-Navigation__Section + .Polaris-Navigation__Section{
    padding-top:var(--p-space-200);
    padding-bottom:var(--p-space-400);
  }

.Polaris-Navigation__Section--fill{
  flex:1 0 auto;
}

.Polaris-Navigation__Section--withSeparator{
  border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
}

.Polaris-Navigation__SectionHeading{
  display:flex;
  align-items:center;
  padding-left:var(--p-space-500);
  padding-right:var(--p-space-100);
}

@supports not (scrollbar-gutter: stable){

.Polaris-Navigation__SectionHeading{
    padding-right:var(--p-space-200);
}
  }

@supports (scrollbar-gutter: stable){

.Polaris-Navigation__SectionHeading{
    padding-right:calc(var(--p-space-100) - var(--pc-app-provider-scrollbar-width));
}
  }

.Polaris-Navigation__SectionHeading > :first-child{
    flex:1 1 auto;
    margin-top:calc(var(--p-space-200) + var(--p-space-050));
    margin-bottom:calc(var(--p-space-200) + var(--p-space-050));
  }

@media (min-width: 48em){

.Polaris-Navigation__SectionHeading > :first-child{
      margin-top:var(--p-space-100);
      margin-bottom:var(--p-space-100);
  }
    }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action{
    -webkit-appearance:none;
            appearance:none;
    margin:0;
    padding:0;
    background:none;
    border:none;
    font-size:inherit;
    line-height:inherit;
    color:inherit;
    cursor:pointer;
    display:flex;
    align-items:center;
    height:calc(100% - var(--p-space-100));
    padding:var(--p-space-050) var(--p-space-200);
    border-radius:var(--p-border-radius-200);
  }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus{
    outline:none;
  }

@supports (scrollbar-gutter: stable){

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action{
      padding-inline:var(--p-space-150);
  }
    }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus-visible:not(:active){
      outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus-visible:not(:active)::after{
    content:none;
  }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action svg{
      fill:var(--p-color-icon);
    }

@media (min-width: 48em){
      .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action svg,
      .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action img{
        height:var(--p-space-400);
        width:var(--p-space-400);
        margin:var(--p-space-050);
      }
    }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action{
    position: relative;
  }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover,
    .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus{
      background:var(--p-color-bg-fill-transparent-hover);
    }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover svg, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus svg{
        fill:var(--p-color-icon-hover);
      }

@media (-ms-high-contrast: active){
        .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover svg, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus svg{
          fill:#ffffff;
        }
        .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover img, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus img{
          filter:var(--p-color-icon-brand);
        }
      }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:hover svg{
      fill:var(--p-filter-icon);
    }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus:hover svg{
      fill:var(--p-color-icon-hover);
    }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active,
    .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active:hover{
      background:var(--p-color-bg-surface-active);
    }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active::after, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active:hover::after{
    content:none;
  }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active svg, .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active:hover svg{
        fill:var(--p-color-icon-active);
      }

.Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:focus,
    .Polaris-Navigation__SectionHeading .Polaris-Navigation__Action:active{
      outline:none;
    }

.Polaris-Navigation__RollupToggle{
  color:var(--p-color-text);
  color:var(--p-color-text-secondary);
}

.Polaris-Navigation__RollupToggle:hover{
    color:var(--p-color-text-brand);
  }

.Polaris-Navigation__RollupToggle:hover svg{
      fill:var(--p-color-icon-brand);
    }

.Polaris-Navigation__RollupToggle:hover img{
      filter:var(--p-color-icon-brand);
    }

.Polaris-Navigation__RollupToggle:focus-visible{
    outline:none;
  }

.Polaris-Navigation__RollupToggle:focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Navigation__RollupToggle:active{
    background-color:var(--p-color-bg-surface-active);
  }

.Polaris-Navigation__List{
  margin:0;
  padding:0;
  list-style:none;
}

.Polaris-Navigation__Indicator{
  position:relative;
  display:inline-block;
  height:0.625rem;
  width:0.625rem;
}

.Polaris-Navigation__SecondaryNavigationOpen{
  animation:var(--p-motion-ease-out) var(--p-motion-duration-150) Polaris-Navigation__snappy--grow;
}

@keyframes Polaris-Navigation__snappy--grow{
  from{
    margin-bottom:-10%;
    opacity:0;
  }

  to{
    margin-bottom:0%;
    opacity:1;
  }
}


.Polaris-OptionList-Option{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  width:100%;
  min-height:var(--pg-control-height);
  text-align:left;
  text-decoration:none;
  border-radius:var(--p-border-radius-100);
  margin-top:var(--p-space-100);
  color:inherit;
}

.Polaris-OptionList-Option:focus{
    outline:none;
  }

.Polaris-OptionList-Option:visited{
    color:inherit;
  }

.Polaris-OptionList-Option:first-child{
    margin-top:0;
  }

.Polaris-OptionList-Option__SingleSelectOption{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  text-align:left;

  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
}

.Polaris-OptionList-Option__SingleSelectOption:focus{
    outline:none;
  }

.Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--focused:focus-visible:not(:active){
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-025);
    background-color:var(--p-color-bg-surface-secondary-hover);
  }

.Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--active{
    background:var(--p-color-bg-surface-secondary-selected);
  }

.Polaris-OptionList-Option__SingleSelectOption:not(.Polaris-OptionList-Option--disabled){
    color:inherit;
  }

.Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--select,
  .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled),
  .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--active{
    font-weight:var(--p-font-weight-semibold);
    background:var(--p-color-bg-surface-secondary-active);
  }

.Polaris-OptionList-Option__SingleSelectOption .Polaris-OptionList-Option__Media{
    padding:0 var(--p-space-200) 0 0;
  }

.Polaris-OptionList-Option__Label,
.Polaris-OptionList-Option__SingleSelectOption,
.Polaris-OptionList-Option__MultiSelectOption{
  display:flex;
  align-items:flex-start;
  width:100%;
  cursor:pointer;
  border-radius:var(--p-border-radius-200);
  padding:var(--p-space-150);
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:break-word;
}

.Polaris-OptionList-Option__Label:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__SingleSelectOption:hover:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__MultiSelectOption:hover:not(.Polaris-OptionList-Option--disabled){
    background-color:var(--p-color-bg-surface-secondary-hover);
  }

.Polaris-OptionList-Option__Label:active:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__SingleSelectOption:active:not(.Polaris-OptionList-Option--disabled), .Polaris-OptionList-Option__MultiSelectOption:active:not(.Polaris-OptionList-Option--disabled){
    background:var(--p-color-bg-surface-secondary-active);
  }

.Polaris-OptionList-Option__Label:hover:not(.Polaris-OptionList-Option--disabled),
  .Polaris-OptionList-Option__SingleSelectOption:hover:not(.Polaris-OptionList-Option--disabled),
  .Polaris-OptionList-Option__MultiSelectOption:hover:not(.Polaris-OptionList-Option--disabled),
  .Polaris-OptionList-Option__Label:active:not(.Polaris-OptionList-Option--disabled),
  .Polaris-OptionList-Option__SingleSelectOption:active:not(.Polaris-OptionList-Option--disabled),
  .Polaris-OptionList-Option__MultiSelectOption:active:not(.Polaris-OptionList-Option--disabled),
  .Polaris-OptionList-Option__Label.Polaris-OptionList-Option--select,
  .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--select,
  .Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select,
  .Polaris-OptionList-Option__Label.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled),
  .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled),
  .Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled){
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-OptionList-Option__Label .Polaris-OptionList-Option__Media, .Polaris-OptionList-Option__SingleSelectOption .Polaris-OptionList-Option__Media, .Polaris-OptionList-Option__MultiSelectOption .Polaris-OptionList-Option__Media{
    padding:0 var(--p-space-200) 0 0;
  }

.Polaris-OptionList-Option__Label.Polaris-OptionList-Option--disabled, .Polaris-OptionList-Option__SingleSelectOption.Polaris-OptionList-Option--disabled, .Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--disabled{
    background:transparent;
    cursor:default;
    color:var(--p-color-text-disabled);
  }

.Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select.Polaris-OptionList-Option__CheckboxLabel{
      background-color:transparent;
    }

.Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select svg{
      fill:var(--p-color-icon-active);
    }

.Polaris-OptionList-Option__MultiSelectOption.Polaris-OptionList-Option--select:hover:not(.Polaris-OptionList-Option--disabled){
    background-color:var(--p-color-bg-surface-secondary-hover);
  }

.Polaris-OptionList-Option--disabled .Polaris-OptionList-Option__Media svg{
  fill:var(--p-color-icon-disabled);
}

.Polaris-OptionList-Option__Media svg{
  fill:var(--p-color-icon);
}

.Polaris-OptionList-Option--verticalAlignTop{
  align-items:flex-start;
}

.Polaris-OptionList-Option--verticalAlignCenter{
  align-items:center;
}

.Polaris-OptionList-Option--verticalAlignBottom{
  align-items:flex-end;
}

.Polaris-OptionList-Option__Icon{
  margin-left:var(--p-space-200);
}

.Polaris-OptionList-Option__Icon svg{
    fill:var(--p-color-icon-brand);
  }

.Polaris-OptionList-Option__Checkbox{
  box-sizing:border-box;
  display:flex;
  flex-shrink:0;
  width:1.25rem;
  height:1.25rem;
  margin-right:var(--p-space-200);
  align-items:center;
}



  .Polaris-Header-Title.Polaris-Header-Title__TitleWithSubtitle{
    margin-top:0;
  }

.Polaris-Header-Title__TitleWrapper{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:var(--p-space-200);
  padding-block:var(--p-space-050);
}

.Polaris-Header-Title__TitleWrapper .Polaris-Header-Title{
    display:inline;
    margin-right:var(--p-space-200);
  }

.Polaris-Header-Title__TitleWrapper .Polaris-Header-Title > *{
      display:inline;
    }

.Polaris-Header-Title__SubTitle{
  margin-top:var(--p-space-050);
}

.Polaris-Header-Title__SubTitle.Polaris-Header-Title__SubtitleCompact{
    margin-top:var(--p-space-050);
  }

.Polaris-Header-Title__SubTitle.Polaris-Header-Title__SubtitleMaxWidth{
    max-width:45ch;
  }


.Polaris-Page-Header__TitleWrapper{
  grid-area:title;
  margin-top:var(--p-space-100);
  align-self:center;
}

@media (min-width: 30.625em){

.Polaris-Page-Header__TitleWrapper{
    margin-top:0;
}
  }

.Polaris-Page-Header__TitleWrapper.Polaris-Page-Header__TitleWrapperExpand{
    flex:1 1 auto;
  }

.Polaris-Page-Header__BreadcrumbWrapper{
  grid-area:breadcrumbs;
}

.Polaris-Page-Header__BreadcrumbWrapper a,
  .Polaris-Page-Header__BreadcrumbWrapper button{
    background:transparent;
    border-radius:var(--p-border-radius-200);
    box-shadow:none;
  }

.Polaris-Page-Header__BreadcrumbWrapper a:is(:hover, :focus, :focus-visible), .Polaris-Page-Header__BreadcrumbWrapper button:is(:hover, :focus, :focus-visible){
      box-shadow:none !important;
    }

.Polaris-Page-Header__BreadcrumbWrapper a:is(:hover, :focus-visible), .Polaris-Page-Header__BreadcrumbWrapper button:is(:hover, :focus-visible){
      background:var(--p-color-bg-fill-tertiary-hover);
    }

.Polaris-Page-Header__BreadcrumbWrapper a:focus, .Polaris-Page-Header__BreadcrumbWrapper button:focus{
      background:var(--p-color-bg-fill-tertiary-active);
      box-shadow:var(--p-shadow-inset-200) !important;
    }

.Polaris-Page-Header__PaginationWrapper{
  margin-left:var(--p-space-200);
  line-height:1;
}

.Polaris-Page-Header__PrimaryActionWrapper{
  margin-top:0;
  margin-left:var(--p-space-100);
}

@media (min-width: 48em){

.Polaris-Page-Header__PrimaryActionWrapper{
    margin-left:var(--p-space-200);
}
  }

.Polaris-Page-Header__Row{
  display:flex;
  justify-content:space-between;
  line-height:normal;
}

.Polaris-Page-Header__Row:first-child{
    min-height:1.75rem;
  }

.Polaris-Page-Header__Row + .Polaris-Page-Header__Row{
    margin-top:var(--p-space-050);
  }

.Polaris-Page-Header--mobileView .Polaris-Page-Header__Row + .Polaris-Page-Header__Row{
      margin-top:var(--p-space-100);
    }

.Polaris-Page-Header__Row + .Polaris-Page-Header__Row .Polaris-Page-Header__RightAlign{
      margin-left:0;
    }

.Polaris-Page-Header__RightAlign{
  grid-area:actions;
  display:flex;
  align-content:flex-end;
  flex:1 1 auto;
  align-items:center;
  align-self:flex-start;
  justify-content:flex-end;
  margin-left:var(--p-space-400);
  white-space:nowrap;
}

@media (max-width: 30.6225em){

.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__RightAlign{
      margin-left:0;
  }
    }

@media (min-width: 30.625em){

.Polaris-Page-Header__AdditionalMetaData{
    margin-left:calc(var(--p-space-500) + var(--p-space-200) + var(--p-space-100));
}
  }

.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__AdditionalMetaData{
    margin-left:0;
  }

.Polaris-Page-Header__Actions{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  text-align:right;
}

@media (max-width: 64.9975em){
    .Polaris-Page-Header--longTitle .Polaris-Page-Header__AdditionalMetaData{
    margin-left:0;
  }
    .Polaris-Page-Header--longTitle .Polaris-Page-Header__Row{
    display:grid;
    gap:var(--p-space-200) var(--p-space-400);
    grid-template-columns:auto 1fr;
    grid-template-areas:'breadcrumbs actions' 'title title';
  }

    .Polaris-Page-Header--longTitle .Polaris-Page-Header__Row + .Polaris-Page-Header__Row{
      gap:0;
    }
  }

@media (max-width: 47.9975em){
    .Polaris-Page-Header--mediumTitle:not(.Polaris-Page-Header--noBreadcrumbs) .Polaris-Page-Header__AdditionalMetaData{
    margin-left:0;
  }
    .Polaris-Page-Header--mediumTitle:not(.Polaris-Page-Header--noBreadcrumbs) .Polaris-Page-Header__Row{
    display:grid;
    gap:var(--p-space-200) var(--p-space-400);
    grid-template-columns:auto 1fr;
    grid-template-areas:'breadcrumbs actions' 'title title';
  }

    .Polaris-Page-Header--mediumTitle:not(.Polaris-Page-Header--noBreadcrumbs) .Polaris-Page-Header__Row + .Polaris-Page-Header__Row{
      gap:0;
    }
  }

.Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__TitleWrapper{
    margin-top:0;
  }

.Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__RightAlign{
    margin-bottom:var(--p-space-100);
  }

@media (min-width: 48em){

.Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__RightAlign{
      margin-bottom:0;
  }
    }

.Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__Row{
    flex-wrap:wrap-reverse;
  }

@media (min-width: 48em){

.Polaris-Page-Header--mediumTitle.Polaris-Page-Header--noBreadcrumbs .Polaris-Page-Header__Row{
      flex-wrap:nowrap;
  }
    }

.Polaris-Page-Header--isSingleRow .Polaris-Page-Header__Row{
  gap:0;
}


html,
body{
  min-height:100%;
  height:100%;
}

.Polaris-Page{
  margin:0 auto;
  padding:0;
  max-width:calc(var(--pg-layout-width-primary-max) + var(--pg-layout-width-secondary-max) + var(--pg-layout-width-inner-spacing-base));
}

@media (min-width: 30.625em){

.Polaris-Page{
    padding:0 var(--p-space-600);
}
  }

.Polaris-Page::after{
    content:'';
    display:table;
  }

.Polaris-Page--fullWidth{
  max-width:none;
}

.Polaris-Page--narrowWidth{
  max-width:var(--pg-layout-width-primary-max);
}

.Polaris-Page__Content{
  padding:var(--p-space-200) 0;
}

@media (min-width: 48em){

.Polaris-Page__Content{
    padding-top:var(--p-space-500);
}
  }


.Polaris-PageActions{
  margin:0 auto;

  border-top:0;
  padding:var(--p-space-400);
}
@media (min-width: 30.625em){
  .Polaris-PageActions{
    padding:var(--p-space-400) 0;
}
  }


.Polaris-Picker-SearchField{
  flex-grow:1;
  padding:var(--p-space-100) 0;
  outline:none;
  border:none;
  font-size:var(--p-font-size-400);
  line-height:var(--p-font-line-height-600);
}
@media (min-width: 48em){
  .Polaris-Picker-SearchField{
    font-size:var(--p-font-size-325);
    line-height:var(--p-font-line-height-500);
}
  }


.Polaris-Picker-Activator{
  background:none;
  outline:none;
  padding:var(--p-space-200) var(--p-space-300);
  border-radius:var(--p-border-radius-200);
  border:var(--p-border-width-025) solid var(--p-color-border);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}

.Polaris-Picker-Activator:hover{
    background-color:var(--p-color-bg-surface-hover);
  }

.Polaris-Picker-Activator:active{
    background-color:var(--p-color-bg-surface-active);
  }

.Polaris-Picker-Activator:focus:not(:active){
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-025);
  }

.Polaris-Picker-Activator--disabled{
  pointer-events:none;
  background-color:var(--p-color-bg-surface-disabled);
  border-color:var(--p-color-border-disabled);
}


.Polaris-ProgressBar{
  --pc-progress-bar-height-base:1rem;
  --pc-progress-bar-height-small:calc(var(--pc-progress-bar-height-base)*0.5);
  --pc-progress-bar-height-large:calc(var(--pc-progress-bar-height-base)*2);

  --pc-progress-bar-duration: initial;
  --pc-progress-bar-percent: initial;
  overflow:hidden;
  width:100%;
  background-color:var(--pc-progress-bar-background);
  border-radius:var(--p-border-radius-100);
}

@media (forced-colors: active){

.Polaris-ProgressBar{
    border:var(--p-border-width-025) solid transparent;
}
  }

.Polaris-ProgressBar--sizeSmall{
  height:var(--pc-progress-bar-height-small);
}

.Polaris-ProgressBar--sizeMedium{
  height:var(--pc-progress-bar-height-base);
}

.Polaris-ProgressBar--sizeLarge{
  height:var(--pc-progress-bar-height-large);
}

.Polaris-ProgressBar--toneHighlight{
  --pc-progress-bar-background:var(--p-color-bg-fill-tertiary);
  --pc-progress-bar-indicator:var(--p-color-bg-fill-info);
}

.Polaris-ProgressBar--tonePrimary{
  --pc-progress-bar-background:var(--p-color-bg-fill-tertiary);
  --pc-progress-bar-indicator:var(--p-color-bg-fill-brand);
}

.Polaris-ProgressBar--toneSuccess{
  --pc-progress-bar-background:var(--p-color-bg-fill-tertiary);
  --pc-progress-bar-indicator:var(--p-color-bg-fill-success);
}

.Polaris-ProgressBar--toneCritical{
  --pc-progress-bar-background:var(--p-color-bg-fill-tertiary);
  --pc-progress-bar-indicator:var(--p-color-bg-fill-critical);
}

.Polaris-ProgressBar__Indicator{
  height:inherit;
  background-color:var(--pc-progress-bar-indicator);
  transition:transform var(--pc-progress-bar-duration) var(--p-motion-ease);
  transform:scaleX(0);
  transform-origin:0 50%;
}

@media screen and (-ms-high-contrast: active){

.Polaris-ProgressBar__Indicator{
    border:var(--pc-progress-bar-height-base) solid highlight;
}
  }

.Polaris-ProgressBar__IndicatorAppearActive,
.Polaris-ProgressBar__IndicatorAppearDone{
  transform:scaleX(var(--pc-progress-bar-percent));
}

.Polaris-ProgressBar__Progress,
.Polaris-ProgressBar__Label{
  position: absolute !important;
  top: 0;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}


.Polaris-RangeSlider{
  --pc-range-slider-input:10;
  --pc-range-slider-output:20;
  --pc-range-slider-track-height:0.25rem;
  --pc-range-slider-thumb-size:1rem;
  --pc-track-dashed-border-radius:var(--p-border-radius-100);
}

.Polaris-RangeSlider--trackDashedAfter::after{
  content:'';
}

.Polaris-RangeSlider--trackDashed,
.Polaris-RangeSlider--trackDashedAfter::after{
  --pc-track-dashed-color:var(--p-color-border);
  position:absolute;
  height:var(--pc-range-slider-track-height);
  width:100%;
  background-image:linear-gradient(
    to right,
    var(--pc-track-dashed-color),
    var(--pc-track-dashed-color) 50%,
    transparent 50%,
    transparent 100%
  );
  background-size:var(--pc-range-slider-track-height) var(--pc-range-slider-track-height);
  border-radius:var(--pc-track-dashed-border-radius);
  border-right:var(--pc-track-dashed-border-radius) var(--pc-track-dashed-color) solid;
}


.Polaris-RangeSlider-DualThumb{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
}

.Polaris-RangeSlider-DualThumb__TrackWrapper{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-height:1.75rem;
  cursor:pointer;
}

.Polaris-RangeSlider-DualThumb__TrackWrapper.Polaris-RangeSlider-DualThumb--disabled{
    opacity:0.8;
    cursor:not-allowed;
  }

.Polaris-RangeSlider-DualThumb__Track{
  --pc-range-slider-progress-upper: initial;
  --pc-range-slider-progress-lower: initial;
  --pc-dual-thumb-unselected-range:transparent;
  --pc-dual-thumb-selected-range:var(--p-color-bg-fill-brand);
  --pc-dual-thumb-gradient-colors:var(--pc-dual-thumb-unselected-range) 0%, var(--pc-dual-thumb-unselected-range) var(--pc-range-slider-progress-lower), var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-lower), var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-upper), var(--pc-dual-thumb-unselected-range) var(--pc-range-slider-progress-upper), var(--pc-dual-thumb-unselected-range) 100%;
  position:absolute;
  z-index:1;
  width:100%;
  height:var(--pc-range-slider-track-height);
  border-radius:var(--pc-range-slider-thumb-size);
  background-image:linear-gradient(
    to right,
    var(--pc-dual-thumb-gradient-colors)
  );
}

.Polaris-RangeSlider-DualThumb--error .Polaris-RangeSlider-DualThumb__Track{
    --pc-dual-thumb-selected-range:var(--p-color-bg-fill-critical);
    --pc-dual-thumb-gradient-colors:var(--pc-dual-thumb-unselected-range) 0%, var(--pc-dual-thumb-unselected-range) var(--pc-range-slider-progress-lower), var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-lower), var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-upper), var(--pc-dual-thumb-unselected-range) var(--pc-range-slider-progress-upper), var(--pc-dual-thumb-unselected-range) 100%;
    background-image:linear-gradient(
      to right,
      var(--pc-dual-thumb-gradient-colors)
    );
  }

.Polaris-RangeSlider-DualThumb--disabled .Polaris-RangeSlider-DualThumb__Track{
    background:var(--p-color-border-disabled) none;
  }

.Polaris-RangeSlider-DualThumb__Thumbs{
  position: relative;
  position:absolute;
  z-index:var(--pc-range-slider-input);
  padding:0;
  width:var(--pc-range-slider-thumb-size);
  height:var(--pc-range-slider-thumb-size);
  border-radius:var(--p-border-radius-full);
  border:var(--p-border-width-025) solid var(--p-color-border-emphasis);
  background:linear-gradient(
    var(--p-color-bg-fill-brand),
    var(--p-color-bg-fill-brand)
  );
  -webkit-tap-highlight-color:transparent;
  cursor:-webkit-grab;
  transition:transform var(--p-motion-duration-150) var(--p-motion-ease);
}

.Polaris-RangeSlider-DualThumb__Thumbs::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.125rem;
  right: -0.125rem;
  bottom: -0.125rem;
  left: -0.125rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-200);
}

.Polaris-RangeSlider-DualThumb__Thumbs.Polaris-RangeSlider-DualThumb--disabled{
    cursor:not-allowed;
    border-color:var(--p-color-border-disabled);
    background:var(--p-color-border-disabled);
  }

.Polaris-RangeSlider-DualThumb__Thumbs:active{
    transform:scale(1.5);
  }

.Polaris-RangeSlider-DualThumb__Thumbs:focus-visible{
    outline:0;
  }

.Polaris-RangeSlider-DualThumb__Thumbs:focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-RangeSlider-DualThumb--error .Polaris-RangeSlider-DualThumb__Thumbs{
    border-color:var(--p-color-bg-fill-critical);
    background:linear-gradient(
      var(--p-color-bg-fill-critical),
      var(--p-color-bg-fill-critical)
    );
  }

.Polaris-RangeSlider-DualThumb__Prefix{
  flex:0 0 auto;
  margin-right:var(--p-space-200);
}

.Polaris-RangeSlider-DualThumb__Suffix{
  flex:0 0 auto;
  margin-left:var(--p-space-200);
}

.Polaris-RangeSlider-DualThumb__Output{
  --pc-range-slider-output-spacing:var(--p-space-400);
  position:absolute;
  z-index:var(--pc-range-slider-output);
  bottom:1.5rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition-property:opacity, visibility, bottom;
  transition-duration:var(--p-motion-duration-150);
  transition-timing-function:var(--p-motion-ease);
  transform:translateX(calc(-50% + var(--pc-range-slider-thumb-size)/2));
}

.Polaris-RangeSlider-DualThumb__Thumbs:active + .Polaris-RangeSlider-DualThumb__Output{
    opacity:1;
    visibility:visible;
    bottom:2rem;
  }

.Polaris-RangeSlider-DualThumb__OutputBubble{
  position:relative;
  display:flex;
  padding:0 var(--p-space-200);
  min-width:2rem;
  height:2rem;
  background-color:var(--p-color-bg-surface);
  box-shadow:var(--p-shadow-500);
  border-radius:var(--p-border-radius-100);
  transition-property:transform;
  transition-duration:var(--p-motion-duration-150);
  transition-timing-function:var(--p-motion-ease);
}

.Polaris-RangeSlider-DualThumb__Thumbs:hover + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble,
  .Polaris-RangeSlider-DualThumb__Thumbs:active + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble,
  .Polaris-RangeSlider-DualThumb__Thumbs:focus + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble{
    transform:translateY(calc(var(--pc-range-slider-output-spacing)*-1));
  }

@media (min-width: 48em){

.Polaris-RangeSlider-DualThumb__Thumbs:hover + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble,
  .Polaris-RangeSlider-DualThumb__Thumbs:active + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble,
  .Polaris-RangeSlider-DualThumb__Thumbs:focus + .Polaris-RangeSlider-DualThumb__Output .Polaris-RangeSlider-DualThumb__OutputBubble{
      transform:translateY(
        calc((var(--pc-range-slider-output-spacing)*0.5)*-1)
      );
  }
    }

.Polaris-RangeSlider-DualThumb__OutputBubble > :first-child{
    display:block;
    flex:1 1 auto;
    margin:auto;
  }


.Polaris-RangeSlider-SingleThumb{
  display:flex;
  align-items:center;
}

.Polaris-RangeSlider-SingleThumb.Polaris-RangeSlider-SingleThumb--disabled{
    opacity:0.8;
  }

.Polaris-RangeSlider-SingleThumb__InputWrapper{
  position:relative;
  display:flex;
  align-items:center;
  flex:1 1 auto;
  height:var(--pc-range-slider-thumb-size);
}

.Polaris-RangeSlider-SingleThumb__InputWrapper input{
    padding:var(--p-space-300) 0;
    background-color:transparent;
    cursor:pointer;
  }

@media (max-width: 30.6225em){

.Polaris-RangeSlider-SingleThumb__InputWrapper{
    height:2.75rem;
}
  }

.Polaris-RangeSlider-SingleThumb--disabled input{
    cursor:not-allowed;
  }

.Polaris-RangeSlider-SingleThumb__Prefix{
  flex:0 0 auto;
  margin-right:var(--p-space-200);
}

.Polaris-RangeSlider-SingleThumb__Suffix{
  flex:0 0 auto;
  margin-left:var(--p-space-200);
}

.Polaris-RangeSlider-SingleThumb__Input{
  --pc-range-slider-min: initial;
  --pc-range-slider-max: initial;
  --pc-range-slider-current: initial;
  --pc-range-slider-progess: initial;
  --pc-range-slider-output-factor: initial;
  --pc-single-thumb-progress-lower:var(--p-color-bg-fill-brand);
  --pc-single-thumb-progress-upper:transparent;
  --pc-single-thumb-gradient-colors:var(--pc-single-thumb-progress-lower) 0%, var(--pc-single-thumb-progress-lower) var(--pc-range-slider-progress), var(--pc-single-thumb-progress-upper) var(--pc-range-slider-progress), var(--pc-single-thumb-progress-upper) 100%;
  position:relative;
  z-index:var(--pc-range-slider-input);
  flex:1 1 auto;
  margin:0;
  padding:0;
  width:100%;
  background-color:transparent;
  -webkit-appearance:none;
          appearance:none;
}

.Polaris-RangeSlider-SingleThumb__Input::-ms-tooltip{
    display:none;
  }

.Polaris-RangeSlider-SingleThumb__Input:focus{
    outline:0;
  }

.Polaris-RangeSlider-SingleThumb__Input::-moz-focus-outer{
    border:0;
  }

.Polaris-RangeSlider-SingleThumb__Input::-ms-track{
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-RangeSlider-SingleThumb__Input::-ms-track {
    cursor:pointer;
    width:100%;
    height:var(--pc-range-slider-track-height);
    background-image:linear-gradient(
      to right,
      var(--pc-single-thumb-gradient-colors)
    );
    border:none;
    border-radius:var(--pc-range-slider-track-height);
}

.Polaris-RangeSlider-SingleThumb__Input::-moz-range-track {
    cursor:pointer;
    width:100%;
    height:var(--pc-range-slider-track-height);
    background-image:linear-gradient(
      to right,
      var(--pc-single-thumb-gradient-colors)
    );
    border:none;
    border-radius:var(--pc-range-slider-track-height);
}

.Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-runnable-track {
    cursor:pointer;
    width:100%;
    height:var(--pc-range-slider-track-height);
    background-image:linear-gradient(
      to right,
      var(--pc-single-thumb-gradient-colors)
    );
    border:none;
    border-radius:var(--pc-range-slider-track-height);
}

.Polaris-RangeSlider-SingleThumb__Input::-ms-thumb {
    cursor:-webkit-grab;
    width:var(--pc-range-slider-thumb-size);
    height:var(--pc-range-slider-thumb-size);
    border:var(--p-border-width-025) solid transparent;
    border-radius:var(--p-border-radius-full);
    background:linear-gradient(
      var(--p-color-bg-fill-brand),
      var(--p-color-bg-fill-brand)
    );
    box-shadow:0 0 0 0 var(--p-color-border-focus);
    appearance:none;
    -ms-transition-property:border-color, transform;
    transition-property:border-color, transform;
    transition-duration:var(--p-motion-duration-200);
    transition-timing-function:var(--p-motion-ease);
    margin-top:calc((var(--pc-range-slider-thumb-size) - var(--pc-range-slider-track-height))*-1/2);
}

.Polaris-RangeSlider-SingleThumb__Input::-ms-thumb:hover{
      background:linear-gradient(
        var(--p-color-bg-fill-brand),
        var(--p-color-bg-fill-brand)
      );
    }

.Polaris-RangeSlider-SingleThumb__Input::-moz-range-thumb {
    cursor:-webkit-grab;
    width:var(--pc-range-slider-thumb-size);
    height:var(--pc-range-slider-thumb-size);
    border:var(--p-border-width-025) solid transparent;
    border-radius:var(--p-border-radius-full);
    background:linear-gradient(
      var(--p-color-bg-fill-brand),
      var(--p-color-bg-fill-brand)
    );
    box-shadow:0 0 0 0 var(--p-color-border-focus);
    appearance:none;
    -moz-transition-property:border-color, transform;
    transition-property:border-color, transform;
    transition-duration:var(--p-motion-duration-200);
    transition-timing-function:var(--p-motion-ease);
    margin-top:calc((var(--pc-range-slider-thumb-size) - var(--pc-range-slider-track-height))*-1/2);
}

.Polaris-RangeSlider-SingleThumb__Input::-moz-range-thumb:hover{
      background:linear-gradient(
        var(--p-color-bg-fill-brand),
        var(--p-color-bg-fill-brand)
      );
    }

.Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb {
    cursor:-webkit-grab;
    width:var(--pc-range-slider-thumb-size);
    height:var(--pc-range-slider-thumb-size);
    border:var(--p-border-width-025) solid transparent;
    border-radius:var(--p-border-radius-full);
    background:linear-gradient(
      var(--p-color-bg-fill-brand),
      var(--p-color-bg-fill-brand)
    );
    box-shadow:0 0 0 0 var(--p-color-border-focus);
    -webkit-appearance:none;
            appearance:none;
    -webkit-transition-property:border-color, transform;
    transition-property:border-color, transform;
    transition-duration:var(--p-motion-duration-200);
    transition-timing-function:var(--p-motion-ease);
    margin-top:calc((var(--pc-range-slider-thumb-size) - var(--pc-range-slider-track-height))*-1/2);
}

.Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb:hover{
      background:linear-gradient(
        var(--p-color-bg-fill-brand),
        var(--p-color-bg-fill-brand)
      );
    }

.Polaris-RangeSlider-SingleThumb__Input::-ms-thumb{
    margin-top:0;
    transform:translateY(calc(var(--pc-range-slider-thumb-size)*0.2)) scale(0.4);
  }

.Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb{
    margin-top:calc((var(--pc-range-slider-thumb-size) - var(--pc-range-slider-track-height))*-0.5);
  }

.Polaris-RangeSlider-SingleThumb__Input:active::-ms-thumb {
      transform:scale(1.5);
}

.Polaris-RangeSlider-SingleThumb__Input:active::-moz-range-thumb {
      transform:scale(1.5);
}

.Polaris-RangeSlider-SingleThumb__Input:active::-webkit-slider-thumb {
      transform:scale(1.5);
}

.Polaris-RangeSlider-SingleThumb__Input:focus{
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-RangeSlider-SingleThumb__Input:focus::-ms-thumb {
      border-color:var(--p-color-bg-surface);
      box-shadow:0 0 0 var(--p-border-width-050) var(--p-color-border-focus);
}

.Polaris-RangeSlider-SingleThumb__Input:focus::-moz-range-thumb {
      border-color:var(--p-color-bg-surface);
      box-shadow:0 0 0 var(--p-border-width-050) var(--p-color-border-focus);
}

.Polaris-RangeSlider-SingleThumb__Input:focus::-webkit-slider-thumb {
      border-color:var(--p-color-bg-surface);
      box-shadow:0 0 0 var(--p-border-width-050) var(--p-color-border-focus);
}

.Polaris-RangeSlider-SingleThumb--error .Polaris-RangeSlider-SingleThumb__Input{
    --pc-single-thumb-progress-lower:var(--p-color-bg-fill-critical);
  }

.Polaris-RangeSlider-SingleThumb--error .Polaris-RangeSlider-SingleThumb__Input::-ms-thumb {
      border-color:var(--p-color-bg-fill-critical);
      background:var(--p-color-bg-fill-critical);
}

.Polaris-RangeSlider-SingleThumb--error .Polaris-RangeSlider-SingleThumb__Input::-moz-range-thumb {
      border-color:var(--p-color-bg-fill-critical);
      background:var(--p-color-bg-fill-critical);
}

.Polaris-RangeSlider-SingleThumb--error .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb {
      border-color:var(--p-color-bg-fill-critical);
      background:var(--p-color-bg-fill-critical);
}

.Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-ms-track{
      outline:var(--p-border-width-025) solid transparent;
    }

.Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-ms-track {
      cursor:auto;
      background-image:none;
      background-color:var(--p-color-border-disabled);
}

.Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-moz-range-track {
      cursor:auto;
      background-image:none;
      background-color:var(--p-color-border-disabled);
}

.Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-runnable-track {
      cursor:auto;
      background-image:none;
      background-color:var(--p-color-border-disabled);
}

.Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-ms-thumb {
      cursor:not-allowed;
      border-color:var(--p-color-border-disabled);
      background:var(--p-color-border-disabled);
}

.Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-moz-range-thumb {
      cursor:not-allowed;
      border-color:var(--p-color-border-disabled);
      background:var(--p-color-border-disabled);
}

.Polaris-RangeSlider-SingleThumb--disabled .Polaris-RangeSlider-SingleThumb__Input::-webkit-slider-thumb {
      cursor:not-allowed;
      border-color:var(--p-color-border-disabled);
      background:var(--p-color-border-disabled);
}

.Polaris-RangeSlider-SingleThumb__Output{
  --pc-range-slider-output-spacing:var(--p-space-400);
  position:absolute;
  z-index:var(--pc-range-slider-output);
  bottom:var(--pc-range-slider-thumb-size);
  left:var(--pc-range-slider-progress);
  transform:translateX(
    calc(-50% + var(--pc-range-slider-output-factor)*var(--pc-range-slider-thumb-size))
  );
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition-property:opacity, visibility, bottom;
  transition-duration:var(--p-motion-duration-200);
  transition-timing-function:var(--p-motion-ease);
}

.Polaris-RangeSlider-SingleThumb__Input:active + .Polaris-RangeSlider-SingleThumb__Output{
    opacity:1;
    visibility:visible;
    bottom:calc(var(--pc-range-slider-thumb-size) + 0.5rem);
  }

.Polaris-RangeSlider-SingleThumb__OutputBubble{
  position:relative;
  display:flex;
  box-shadow:var(--p-shadow-500);
  padding:0 var(--p-space-200);
  min-width:2rem;
  height:2rem;
  background-color:var(--p-color-bg-surface);
  border-radius:var(--p-border-radius-100);
  transition-property:transform;
  transition-duration:var(--p-motion-duration-200);
  transition-timing-function:var(--p-motion-ease);
  outline:var(--p-border-width-025) solid transparent;
}

.Polaris-RangeSlider-SingleThumb__Input:hover + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble,
  .Polaris-RangeSlider-SingleThumb__Input:active + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble,
  .Polaris-RangeSlider-SingleThumb__Input:focus + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble{
    transform:translateY(calc(var(--pc-range-slider-output-spacing)*-1));
  }

@media (min-width: 48em){

.Polaris-RangeSlider-SingleThumb__Input:hover + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble,
  .Polaris-RangeSlider-SingleThumb__Input:active + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble,
  .Polaris-RangeSlider-SingleThumb__Input:focus + .Polaris-RangeSlider-SingleThumb__Output .Polaris-RangeSlider-SingleThumb__OutputBubble{
      transform:translateY(
        calc((var(--pc-range-slider-output-spacing)*0.4)*-1)
      );
  }
    }

.Polaris-RangeSlider-SingleThumb__OutputBubble > :first-child{
    display:block;
    flex:1 1 auto;
    margin:auto;
  }


.Polaris-ResourceItem{
  --pc-resource-item-min-height:2.75rem;
  --pc-resource-item-disclosure-width:3rem;
  --pc-resource-item-offset:2.375rem;
  --pc-resource-item-clickable-stacking-order:1;
  --pc-resource-item-content-stacking-order:2;
  --pc-resource-item-action-unhide-clip:auto;
  --pc-resource-item-action-hide-clip:rect(0, 0, 0, 0);
  --pc-resource-item-action-unhide-overflow:visible;
  --pc-resource-item-action-hide-overflow:hidden;
  outline:none;
  cursor:pointer;
}

.Polaris-ResourceItem:hover{
    background-color:var(--p-color-bg-surface-secondary-hover);
  }

.Polaris-ResourceItem:hover .Polaris-ResourceItem__Actions > *{
        clip:var(--pc-resource-item-action-unhide-clip);
        overflow:var(--pc-resource-item-action-unhide-overflow);
      }

.Polaris-ResourceItem:active{
    background-color:var(--p-color-bg-surface-active);
  }

.Polaris-ResourceItem__ItemWrapper{
  overflow:hidden;
  max-width:100%;
}

.Polaris-ResourceItem__CheckboxWrapper{
  z-index:var(--pc-resource-item-content-stacking-order);
  display:flex;
  align-items:inherit;
  height:100%;
}

.Polaris-ResourceItem--focusedInner,
.Polaris-ResourceItem--focusedInner.Polaris-ResourceItem--focused,
.Polaris-ResourceItem--focusedInner.Polaris-ResourceItem--focused.Polaris-ResourceItem--selected{
  box-shadow:none;
}

.Polaris-ResourceItem__Link,
.Polaris-ResourceItem__Button{
  position:absolute;
  z-index:var(--pc-resource-item-clickable-stacking-order);
  top:0;
  left:0;
  height:100%;
  width:100%;
  opacity:0;
}

.Polaris-ResourceItem__Button{
  padding:0;
  border:none;
}

.Polaris-ResourceItem--selectable{
  width:100%;
  margin-right:0;
}

.Polaris-ResourceItem--disabled{
  cursor:default;
  color:var(--p-color-text-secondary);
}

.Polaris-ResourceItem--disabled:hover{
    background-color:transparent;
  }

.Polaris-ResourceItem__Actions > *{
    clip:var(--pc-resource-item-action-hide-clip);
    overflow:var(--pc-resource-item-action-hide-overflow);
  }

.Polaris-ResourceItem--focused .Polaris-ResourceItem__Actions > *{
      clip:var(--pc-resource-item-action-unhide-clip);
      overflow:var(--pc-resource-item-action-unhide-overflow);
    }

.Polaris-ResourceItem--selected{
  background-color:var(--p-color-bg-surface-brand-selected);
}

.Polaris-ResourceItem--selected:hover{
    background-color:var(--p-color-bg-surface-brand-hover);
  }

.Polaris-ResourceItem--selected:active{
    background-color:var(--p-color-bg-surface-brand-active);
  }

.Polaris-ResourceItem__ListItem{
  position: relative;
}

.Polaris-ResourceItem__ListItem::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 0rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-ResourceItem__ListItem + .Polaris-ResourceItem__ListItem{
    border-top:var(--pc-resource-list-separator-border);
  }

.Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused{
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:calc(var(--p-space-050)*-1);
    z-index:var(--pc-resource-item-clickable-stacking-order);
    border-radius:var(--p-border-radius-0);
  }

.Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused::after{
    content:none;
  }

@media (min-width: 30.625em){

.Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused{
      border-radius:var(--p-border-radius-300);
  }

      .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused:first-of-type{
        border-bottom-left-radius:var(--p-border-radius-0);
        border-bottom-right-radius:var(--p-border-radius-0);
      }

      .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused:last-of-type{
        border-top-left-radius:var(--p-border-radius-0);
        border-top-right-radius:var(--p-border-radius-0);
      }
    }

.Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused:only-child{
      border-radius:var(--p-border-radius-0);
    }

@media (min-width: 30.625em){

.Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused:only-child{
        border-radius:var(--p-border-radius-300);
    }
      }

.Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused.Polaris-ResourceItem--selectable{
      border-radius:var(--p-border-radius-0);
    }

@media (min-width: 30.625em){
        .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused.Polaris-ResourceItem--selectable:last-child{
          border-bottom-left-radius:var(--p-border-radius-300);
          border-bottom-right-radius:var(--p-border-radius-300);
        }
            .Polaris-ResourceItem__ListItem.Polaris-ResourceItem--focused.Polaris-ResourceItem--selectable.Polaris-ResourceItem--hasBulkActions.Polaris-ResourceItem--selected:last-child{
              border-bottom-left-radius:var(--p-border-radius-0);
              border-bottom-right-radius:var(--p-border-radius-0);
            }
      }


.Polaris-Select{
  --pc-select-backdrop:10;
  --pc-select-content:20;
  --pc-select-input:30;
  position:relative;
}

.Polaris-Select select::-ms-expand{
    display:none;
  }

.Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error):hover .Polaris-Select__Backdrop{
      border-color:var(--p-color-input-border-hover);
      background-color:var(--p-color-input-bg-surface-hover);
    }

.Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:active ~ .Polaris-Select__Backdrop{
      border:none;
      box-shadow:var(--p-shadow-inset-200);
      background-color:var(--p-color-input-bg-surface-active);
    }

.Polaris-Select--disabled .Polaris-Select__Content{
    color:var(--p-color-text-disabled);
  }

.Polaris-Select--disabled .Polaris-Select__InlineLabel{
    color:inherit;
  }

.Polaris-Select--disabled .Polaris-Select__Icon svg{
    fill:var(--p-color-icon-disabled);
  }

.Polaris-Select--disabled .Polaris-Select__Backdrop{
    border-color:var(--p-color-border-disabled);
    background-color:var(--p-color-bg-surface-disabled);
  }

.Polaris-Select--disabled .Polaris-Select__Backdrop::before{
      background-color:var(--p-color-input-bg-surface);
    }

.Polaris-Select--disabled .Polaris-Select__Backdrop:hover{
      cursor:default;
    }

.Polaris-Select__Content{
  font-size:var(--p-font-size-325);
  font-weight:var(--p-font-weight-regular);
  line-height:var(--p-font-line-height-500);
  border:none;
  letter-spacing:initial;
  position:relative;
  z-index:var(--pc-select-content);
  display:flex;
  align-items:center;
  width:100%;
  min-height:var(--pg-control-height);
  padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300);

  font-size:var(--p-font-size-400);
  line-height:var(--p-font-line-height-600);
}

@media (min-width: 48em){

.Polaris-Select__Content{
    line-height:var(--p-font-line-height-500);
    font-size:var(--p-font-size-325);
}
  }

@media (max-width: 47.9975em){
    .Polaris-Select__Content div > span{
      font-size:var(--p-font-size-400);
      line-height:var(--p-font-line-height-500);
    }
  }

.Polaris-Select__SelectedOption{
  flex:1 1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.Polaris-Select__Prefix{
  padding-right:var(--p-space-100);
}

.Polaris-Select__Icon svg{
  fill:var(--p-color-icon-secondary);
}

.Polaris-Select__Input{
  font-size:var(--p-font-size-400);
  font-weight:var(--p-font-weight-regular);
  line-height:var(--p-font-line-height-600);
  font-family:var(--p-font-family-sans);
  letter-spacing:initial;
  position:absolute;
  text-rendering:auto;
  top:0;
  left:0;
  z-index:var(--pc-select-input);
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  -webkit-appearance:none;
          appearance:none;
  border:none;
  padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300);
}

@media (min-width: 48em){

.Polaris-Select__Input{
    font-size:var(--p-font-size-325);
    line-height:var(--p-font-line-height-500);
}
  }

.Polaris-Select__Backdrop{
  z-index:var(--pc-select-backdrop);
  top:0;
  right:0;
  bottom:0;
  left:0;
  border:var(--p-border-width-0165) solid var(--p-color-input-border);
  border-radius:var(--p-border-radius-200);
  background-color:var(--p-color-input-bg-surface);
  position:absolute;
}

.Polaris-Select--error .Polaris-Select__Backdrop{
    border-color:var(--p-color-border-critical-secondary);
    background-color:var(--p-color-bg-surface-critical);
  }

.Polaris-Select--error .Polaris-Select__Backdrop.Polaris-Select--hover,
    .Polaris-Select--error .Polaris-Select__Backdrop:hover{
      border-color:var(--p-color-border-critical);
    }

.Polaris-Select--error .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Backdrop{
    border-color:var(--p-color-border-critical-secondary);
    border-width:var(--p-border-width-025);
    background-color:var(--p-color-bg-surface-critical);
  }

.Polaris-Select__Input:focus-visible ~ .Polaris-Select__Backdrop{
    border-color:var(--p-color-input-border-active);
    border-width:var(--p-border-width-025);
    background-color:var(--p-color-input-bg-surface-active);
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-025);
  }

.Polaris-Select--toneMagic .Polaris-Select__Content{
    color:var(--p-color-text-magic);
  }

.Polaris-Select--toneMagic .Polaris-Select__InlineLabel{
    color:inherit;
  }

.Polaris-Select--toneMagic .Polaris-Select__Backdrop{
    border-color:var(--p-color-border-magic-secondary);
    background-color:var(--p-color-bg-surface-magic);
  }

.Polaris-Select--toneMagic .Polaris-Select__Icon svg{
    fill:var(--p-color-icon-magic);
  }

.Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error):not(:focus-within):hover .Polaris-Select__Backdrop{
        border-color:var(--p-color-border-magic-secondary-hover);
        background-color:var(--p-color-bg-surface-magic-hover);
      }

.Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Content{
        color:var(--p-color-text);
      }

.Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Content .Polaris-Select__Icon svg{
          fill:var(--p-color-icon-secondary);
        }

@media (-ms-high-contrast: active){
  .Polaris-Select__Content{
    color:windowText;
    -ms-high-contrast-adjust:none;
  }

  .Polaris-Select__InlineLabel{
    color:inherit;
  }

    .Polaris-Select__InlineLabel::after{
      content:':';
    }

  .Polaris-Select__SelectedOption{
    color:inherit;
  }

  .Polaris-Select__Icon svg{
    fill:buttonText;
  }
    .Polaris-Select__Backdrop::after{
      display:none;
    }
    .Polaris-Select__Input:focus ~ .Polaris-Select__Content{
      color:highlightText;
    }

    .Polaris-Select__Input:focus ~ .Polaris-Select__Backdrop{
      background-color:highlight;
    }
    .Polaris-Select--disabled .Polaris-Select__Content{
      color:grayText;
    }

    .Polaris-Select--disabled .Polaris-Select__Icon{
      opacity:1;
    }
      .Polaris-Select--disabled .Polaris-Select__Icon svg{
        fill:grayText;
      }
}


.Polaris-ResourceList__FiltersWrapper{
  padding:var(--p-space-300);
}

.Polaris-ResourceList__FiltersWrapper + .Polaris-ResourceList__ResourceListWrapper > :first-child:is(.Polaris-ResourceList){
    border-top:var(--pc-resource-list-separator-border);
  }

.Polaris-ResourceList__HeaderOuterWrapper{
  position:relative;
  background-color:var(--p-color-bg-surface);
  z-index:var(--pc-resource-list-header-outer-wrapper-stacking-order);
  border-top-left-radius:var(--p-border-radius-200);
  border-top-right-radius:var(--p-border-radius-200);
}

.Polaris-ResourceList__HeaderOuterWrapper + .Polaris-ResourceList,
  
  
  
  .Polaris-ResourceList__HeaderOuterWrapper + .Polaris-ResourceList__BulkActionsWrapper + .Polaris-ResourceList{
    border-top:var(--pc-resource-list-separator-border);
  }

.Polaris-ResourceList__HeaderWrapper--disabled{
  pointer-events:none;
}

.Polaris-ResourceList__HeaderWrapper--overlay{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:var(--pc-resource-list-header-overlay-stacking-order);
  background-color:rgba(255, 255, 255, 0.5);
}

.Polaris-ResourceList__FiltersWrapper + .Polaris-ResourceList__ResourceListWrapper > .Polaris-ResourceList__HeaderOuterWrapper{
  margin-top:calc(var(--p-space-400)*-1);
}

.Polaris-ResourceList__HeaderWrapper{
  position:relative;
  display:flex;
  width:100%;
  background-color:var(--p-color-bg-surface);
  border-radius:var(--p-border-radius-200);
  min-height:3.25rem;
  align-items:center;
  padding:var(--p-space-200) var(--p-space-300);
}

@media (min-width: 48em){

.Polaris-ResourceList__HeaderWrapper{
    min-height:3rem;
}
  }

.Polaris-ResourceList__HeaderWrapper--isSticky{
  box-shadow:var(--p-shadow-100);
  border-radius:0;
}

.Polaris-ResourceList__HeaderContentWrapper{
  position:absolute;
  z-index:var(--pc-resource-list-content-wrapper-stacking-order);
  right:var(--p-space-300);
  left:var(--p-space-300);
  top:0;
  bottom:0;
  display:flex;
  min-height:var(--pg-control-height);
  opacity:1;
  transition:opacity var(--p-motion-ease) var(--p-motion-duration-200);
  align-items:center;
}

.Polaris-ResourceList__HeaderWrapper--inSelectMode .Polaris-ResourceList__HeaderContentWrapper{
    opacity:0;
  }

.Polaris-ResourceList__SortWrapper,
.Polaris-ResourceList__AlternateToolWrapper{
  position:relative;
  display:flex;
  flex:1 1;
  align-items:center;
}

.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__SortWrapper, .Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__AlternateToolWrapper{
    padding-right:var(--p-space-200);
  }

@media (min-width: 30.625em){

.Polaris-ResourceList__SortWrapper,
.Polaris-ResourceList__AlternateToolWrapper{
    position:relative;
    left:auto;
    flex:0 1 auto;
    margin-left:var(--p-space-400);
}
    .Polaris-ResourceList__HeaderWrapper--hasAlternateTool.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__SortWrapper,
    .Polaris-ResourceList__HeaderWrapper--hasAlternateTool.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__AlternateToolWrapper,
    .Polaris-ResourceList__HeaderWrapper--hasSort.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__SortWrapper,
    .Polaris-ResourceList__HeaderWrapper--hasSort.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__AlternateToolWrapper{
      padding-right:0;
    }
  }

.Polaris-ResourceList__SortWrapper{
  min-width:0;
  max-width:100%;
}

.Polaris-ResourceList__SortWrapper > *{
    max-width:100%;
  }

.Polaris-ResourceList__HeaderTitleWrapper{
  white-space:nowrap;
  text-overflow:ellipsis;
  flex:1 1;
  align-self:center;
}

.Polaris-ResourceList__HeaderWrapper--hasAlternateTool .Polaris-ResourceList__HeaderTitleWrapper,
  .Polaris-ResourceList__HeaderWrapper--hasSort .Polaris-ResourceList__HeaderTitleWrapper{
    display:none;
  }

@media (min-width: 30.625em){
    .Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__HeaderTitleWrapper,
    .Polaris-ResourceList__HeaderWrapper--hasAlternateTool.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__HeaderTitleWrapper,
    .Polaris-ResourceList__HeaderWrapper--hasSort.Polaris-ResourceList__HeaderWrapper--hasSelect .Polaris-ResourceList__HeaderTitleWrapper{
      display:none;
    }

    .Polaris-ResourceList__HeaderWrapper--hasAlternateTool .Polaris-ResourceList__HeaderTitleWrapper,
    .Polaris-ResourceList__HeaderWrapper--hasSort .Polaris-ResourceList__HeaderTitleWrapper{
      display:block;
    }
  }

.Polaris-ResourceList__SelectAllActionsWrapper{
  z-index:var(--pc-resource-list-bulk-actions-wrapper-stacking-order);
  position:absolute;
  left:0;
  width:100%;
  display:flex;
  align-items:center;
}

@media (min-width: 30.625em){

.Polaris-ResourceList__SelectAllActionsWrapper{
    flex:0 1 auto;
    align-self:flex-start;
}
  }

.Polaris-ResourceList__SelectAllActionsWrapperSticky{
  position:fixed;
  top:auto;
  bottom:0;
}

.Polaris-ResourceList__SelectAllActionsWrapperAtEnd{
  opacity:0;
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease);
}

.Polaris-ResourceList__SelectAllActionsWrapperAtEndAppear{
  opacity:1;
}

.Polaris-ResourceList__BulkActionsWrapper{
  position:relative;
  z-index:var(--pc-resource-list-bulk-actions-wrapper-stacking-order);
  width:100%;

  visibility:hidden;
  opacity:0;
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease), visibility var(--p-motion-duration-100) var(--p-motion-ease);
}

.Polaris-ResourceList__BulkActionsWrapper.Polaris-ResourceList__BulkActionsWrapperVisible{
    visibility:visible;
    opacity:1;
  }

.Polaris-ResourceList__PaginationWrapper{
  z-index:var(--pc-pagination-index);
}

@media (min-width: 48em){

.Polaris-ResourceList__PaginationWrapper{
    position:sticky;
    bottom:0;
}
  }

.Polaris-ResourceList__CheckableButtonWrapper{
  display:none;
  height:100%;
}

@media (min-width: 30.625em){

.Polaris-ResourceList__CheckableButtonWrapper{
    flex:1 1;
    display:block;
}
  }

.Polaris-ResourceList__SelectButtonWrapper{
  position:relative;
  flex:none;
}

@media (min-width: 30.625em){

.Polaris-ResourceList__SelectButtonWrapper{
    display:none;
}
  }

.Polaris-ResourceList__EmptySearchResultWrapper{
  padding-top:var(--p-space-800);
  padding-bottom:var(--p-space-800);
}

@media (min-height: 37.5em){

.Polaris-ResourceList__EmptySearchResultWrapper{
    padding-top:var(--p-space-1600);
    padding-bottom:var(--p-space-1600);
}
  }

.Polaris-ResourceList__ResourceListWrapper{
  --pc-resource-list-stacking-order:1;
  --pc-resource-list-content-wrapper-stacking-order:1;
  --pc-resource-list-overlay-stacking-order:3;
  --pc-resource-list-header-overlay-stacking-order:4;
  --pc-resource-list-spinner-stacking-order:4;
  --pc-pagination-index:30;
  --pc-resource-list-bulk-actions-wrapper-stacking-order:31;
  --pc-resource-list-header-outer-wrapper-stacking-order:31;
  --pc-resource-list-separator-border:var(--p-border-width-025) solid var(--p-color-border);
  position:relative;
}

.Polaris-ResourceList{
  position:relative;
  z-index:var(--pc-resource-list-stacking-order);
  margin:0;
  padding:0;
  list-style:none;
}

.Polaris-ResourceList__ItemWrapper{
  position:relative;
  z-index:var(--pc-resource-list-stacking-order);
  overflow:hidden;
  max-width:100%;
}

.Polaris-ResourceList__ItemWrapper + .Polaris-ResourceList__ItemWrapper{
    border-top:var(--pc-resource-list-separator-border);
  }

.Polaris-ResourceList__ItemWrapper--isLoading{
  min-height:4rem;
}

.Polaris-ResourceList__SpinnerContainer{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:var(--pc-resource-list-spinner-stacking-order);
  display:flex;
  justify-content:center;
}

.Polaris-ResourceList__LoadingOverlay{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:var(--pc-resource-list-overlay-stacking-order);
  display:flex;
  justify-content:center;
  background-color:rgba(255, 255, 255, 0.5);
}

.Polaris-ResourceList__DisabledPointerEvents{
  pointer-events:none;
}

.Polaris-ResourceList--disableTextSelection{
  -webkit-user-select:none;
          user-select:none;
}


.Polaris-SelectAllActions{
  display:flex;
  gap:var(--p-space-200);
  align-items:center;
  justify-content:flex-start;
  width:100%;
  transition:var(--p-motion-duration-100) var(--p-motion-ease);
  transition-property:transform, opacity;
}

.Polaris-SelectAllActions.Polaris-SelectAllActions--selectAllActionsNotSticky{
    transform:none;
    opacity:1;
  }

.Polaris-SelectAllActions__SelectAllActions--entering,
.Polaris-SelectAllActions__SelectAllActions--exiting{
  display:flex;
  opacity:0;
}

.Polaris-SelectAllActions__SelectAllActions--entering:not(:is(.Polaris-SelectAllActions--selectAllActionsNotSticky, .Polaris-SelectAllActions__SelectAllActions--hasPagination)), .Polaris-SelectAllActions__SelectAllActions--exiting:not(:is(.Polaris-SelectAllActions--selectAllActionsNotSticky, .Polaris-SelectAllActions__SelectAllActions--hasPagination)){
    transform:translateY(100%);
  }

.Polaris-SelectAllActions__SelectAllActions--exited{
  display:none;
  opacity:0;
}

.Polaris-SelectAllActions__SelectAllActions--exited:not(:is(.Polaris-SelectAllActions--selectAllActionsNotSticky, .Polaris-SelectAllActions__SelectAllActions--hasPagination)){
    transform:translateY(100%);
  }

.Polaris-SelectAllActions__SelectAllActions--entered{
  opacity:1;
  display:flex;
  transform:translateY(0);
}

.Polaris-SelectAllActions__AllAction{
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  color:var(--p-color-text-emphasis);
  outline:none;
  position: relative;
}

.Polaris-SelectAllActions__AllAction::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-SelectAllActions__AllAction:hover,
  .Polaris-SelectAllActions__AllAction:focus{
    color:var(--p-color-text-emphasis-hover);
  }

.Polaris-SelectAllActions__AllAction:active{
    color:var(--p-color-text-emphasis-active);
  }

.Polaris-SelectAllActions__AllAction:focus-visible:not(:active)::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}


.Polaris-SkeletonBodyText__SkeletonBodyTextContainer{
  width:100%;
}

.Polaris-SkeletonBodyText{
  height:var(--p-space-200);
  display:flex;
  background-color:var(--p-color-bg-fill-tertiary);
  border-radius:var(--p-border-radius-100);
}

@media screen and (-ms-high-contrast: active){

.Polaris-SkeletonBodyText{
    background-color:grayText;
}
  }

.Polaris-SkeletonBodyText:last-child:not(:first-child){
    width:80%;
  }

.Polaris-SkeletonBodyText + .Polaris-SkeletonBodyText{
    margin-top:var(--p-space-300);
  }


.Polaris-SkeletonDisplayText__DisplayText{
  --pc-skeleton-display-text-height:var(--p-font-line-height-500);
  --pc-skeleton-display-text-height-not-condensed:var(
    --p-font-line-height-500
  );
  max-width:var(--pc-skeleton-display-text-max-width, 120px);

  display:flex;
  background-color:var(--p-color-bg-fill-tertiary);
  border-radius:var(--p-border-radius-100);
  height:var(--pc-skeleton-display-text-height);
}

@media screen and (-ms-high-contrast: active){

.Polaris-SkeletonDisplayText__DisplayText{
    background-color:grayText;
}
  }

@media (min-width: 48em){

.Polaris-SkeletonDisplayText__DisplayText{
    height:var(--pc-skeleton-display-text-height-not-condensed);
}
  }

.Polaris-SkeletonDisplayText--sizeSmall{
  --pc-skeleton-display-text-height:var(--p-font-line-height-600);
  --pc-skeleton-display-text-height-not-condensed:var(
    --p-font-line-height-700
  );
}

.Polaris-SkeletonDisplayText--sizeMedium{
  --pc-skeleton-display-text-height:var(--p-font-line-height-700);
  --pc-skeleton-display-text-height-not-condensed:var(
    --p-font-line-height-800
  );
}

.Polaris-SkeletonDisplayText--sizeLarge{
  --pc-skeleton-display-text-height:var(--p-font-line-height-700);
  --pc-skeleton-display-text-height-not-condensed:var(
    --p-font-line-height-800
  );
}

.Polaris-SkeletonDisplayText--sizeExtraLarge{
  --pc-skeleton-display-text-height:2.25rem;
  --pc-skeleton-display-text-height-not-condensed:2.75rem;
}


:root{
  --pc-skeleton-page-max-width:62.375rem;
  --pc-skeleton-page-max-width-narrow:41.375rem;
}

@media screen and (-ms-high-contrast: active){

.Polaris-SkeletonPage__SkeletonTitle{
    background-color:grayText;
}
  }


.Polaris-SkeletonTabs__Tabs{
  display:flex;
  width:100%;
  overflow:auto;
}

@media (min-width: 48em){

.Polaris-SkeletonTabs__Tabs{
    overflow:visible;
}
  }

.Polaris-SkeletonTabs__Tab{
  position:relative;
  display:flex;
  align-items:center;
  height:calc(var(--p-height-800) + var(--p-height-400));
  padding:var(--p-space-200) var(--p-space-300);
  margin-right:var(--p-space-100);
}

.Polaris-SkeletonTabs__Tab:last-child{
    margin-right:0;
  }

@media (min-width: 48em){

.Polaris-SkeletonTabs__Tab{
    height:calc(var(--p-height-700) + var(--p-height-400));
}
  }

.Polaris-SkeletonTabs__TabText{
  width:var(--p-width-1600);
  height:var(--p-space-300);
  background-color:var(--p-color-bg-fill-tertiary);
  border-radius:var(--p-border-radius-100);
}

@media screen and (-ms-high-contrast: active){

.Polaris-SkeletonTabs__TabText{
    background-color:grayText;
}
  }

.Polaris-SkeletonTabs--fitted{
  flex-wrap:nowrap;
}

.Polaris-SkeletonTabs--fitted .Polaris-SkeletonTabs__Tab{
    justify-content:flex-start;
  }

@media (min-width: 48em){

.Polaris-SkeletonTabs--fitted .Polaris-SkeletonTabs__Tab{
      flex:1 1 100%;
      justify-content:center;
  }
    }

@media (min-width: 48em){

.Polaris-SkeletonTabs--fitted .Polaris-SkeletonTabs__TabText{
      width:100%;
  }
    }


.Polaris-SkeletonThumbnail{
  --pc-skeleton-thumbnail-extra-small-size:1.5rem;
  --pc-skeleton-thumbnail-small-size:2.5rem;
  --pc-skeleton-thumbnail-medium-size:3.75rem;
  --pc-skeleton-thumbnail-large-size:5rem;
  display:flex;
  background-color:var(--p-color-bg-fill-tertiary);
  border-radius:var(--p-border-radius-200);
}

@media screen and (-ms-high-contrast: active){

.Polaris-SkeletonThumbnail{
    background-color:grayText;
}
  }

.Polaris-SkeletonThumbnail--sizeExtraSmall{
  height:var(--pc-skeleton-thumbnail-extra-small-size);
  width:var(--pc-skeleton-thumbnail-extra-small-size);
}

.Polaris-SkeletonThumbnail--sizeSmall{
  height:var(--pc-skeleton-thumbnail-small-size);
  width:var(--pc-skeleton-thumbnail-small-size);
}

.Polaris-SkeletonThumbnail--sizeMedium{
  height:var(--pc-skeleton-thumbnail-medium-size);
  width:var(--pc-skeleton-thumbnail-medium-size);
}

.Polaris-SkeletonThumbnail--sizeLarge{
  height:var(--pc-skeleton-thumbnail-large-size);
  width:var(--pc-skeleton-thumbnail-large-size);
}


.Polaris-Thumbnail{
  --pc-thumbnail-extra-small-size:1.5rem;
  --pc-thumbnail-small-size:2.5rem;
  --pc-thumbnail-medium-size:3.75rem;
  --pc-thumbnail-large-size:5rem;
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--p-color-bg-surface);
  min-width:var(--pc-thumbnail-extra-small-size);
  max-width:100%;
  border-radius:var(--p-border-radius-200);
}

.Polaris-Thumbnail::after{
    content:'';
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    border-radius:var(--p-border-radius-200);
    box-shadow:var(--p-shadow-border-inset);
    display:block;
    padding-bottom:100%;
  }

.Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall,
  .Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall::after{
    border-radius:var(--p-border-radius-150);
  }

.Polaris-Thumbnail::before{
    content:'';
    display:block;
    padding-bottom:100%;
  }

.Polaris-Thumbnail--sizeExtraSmall{
  width:var(--pc-thumbnail-extra-small-size);
}

.Polaris-Thumbnail--sizeSmall{
  width:var(--pc-thumbnail-small-size);
}

.Polaris-Thumbnail--sizeMedium{
  width:var(--pc-thumbnail-medium-size);
}

.Polaris-Thumbnail--sizeLarge{
  width:var(--pc-thumbnail-large-size);
}

.Polaris-Thumbnail--transparent{
  background:transparent;
}

.Polaris-Thumbnail > *{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  max-width:100%;
  max-height:100%;
  color:var(--p-color-icon-secondary);
}

.Polaris-Thumbnail > * svg{
    fill:currentColor;
  }


.Polaris-TopBar-SearchDismissOverlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:var(--p-z-index-7);
  height:100%;
}

.Polaris-TopBar-SearchDismissOverlay--visible{
  background-color:transparent;
  animation:none;
}


.Polaris-TopBar-Search{
  position:fixed;
  visibility:hidden;
  z-index:var(--p-z-index-8);
  pointer-events:none;
  top:var(--pg-top-bar-height);
  left:0;
  right:0;
  box-shadow:var(--p-shadow-600);
  overflow:hidden;
}

@media (min-width: 30.625em){

.Polaris-TopBar-Search{
    position:absolute;
    top:100%;
    max-width:36.25rem;
    margin:var(--p-space-100) var(--p-space-500) 0;
    border-radius:var(--p-border-radius-200);
}
  }

@media (min-width: 48em){

.Polaris-TopBar-Search{
    margin:var(--p-space-100) var(--p-space-800) 0;
}
  }

.Polaris-TopBar-Search__SearchContent{
  background-color:var(--p-color-bg-surface);
}

.Polaris-TopBar-Search--visible{
  visibility:initial;
  pointer-events:all;
}

.Polaris-TopBar-Search__Results{
  position:relative;
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - var(--pg-top-bar-height));
  margin:0;
}

@media (min-width: 30.625em){

.Polaris-TopBar-Search__Results{
    max-height:60vh;
}
  }


.Polaris-TopBar-SearchField{
  --pc-search-field-backdrop:1;
  --pc-search-field-input:2;
  --pc-search-field-icon:3;
  --pc-search-field-action:3;
  --pc-search-field-icon-size:1.125rem;
  z-index:var(--p-z-index-11);
  position:relative;
  display:flex;
  flex:1 1 auto;
  align-items:center;
  border:var(--p-border-width-025) solid transparent;
  width:100%;
}

.Polaris-TopBar-SearchField--focused .Polaris-TopBar-SearchField__Input,
.Polaris-TopBar-SearchField__Input:focus{
  color:var(--p-color-text-inverse);
}

.Polaris-TopBar-SearchField--focused .Polaris-TopBar-SearchField__Input::placeholder, .Polaris-TopBar-SearchField__Input:focus::placeholder{
    color:var(--p-color-text-inverse-secondary);
  }

.Polaris-TopBar-SearchField__Input:focus-visible ~ .Polaris-TopBar-SearchField__Backdrop::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-TopBar-SearchField__Input:focus-visible ~ .Polaris-TopBar-SearchField__BackdropShowFocusBorder{
    border:var(--p-border-width-025) solid var(--pc-top-bar-border);
  }

.Polaris-TopBar-SearchField__Input:focus-visible ~ .Polaris-TopBar-SearchField__Icon svg{
    fill:var(--p-color-icon-secondary);
  }

.Polaris-TopBar-SearchField__Input:focus-visible:not(:active) ~ .Polaris-TopBar-SearchField__Backdrop{
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-050);
  }

.Polaris-TopBar-SearchField__Input:focus-visible:not(:active) ~ .Polaris-TopBar-SearchField__Icon svg{
    fill:var(--p-color-icon-secondary);
  }

.Polaris-TopBar-SearchField--focused .Polaris-TopBar-SearchField__BackdropShowFocusBorder{
    border:var(--p-border-width-025) solid var(--pc-top-bar-border);
  }

.Polaris-TopBar-SearchField--focused .Polaris-TopBar-SearchField__Icon svg{
    fill:var(--p-color-icon-inverse);
  }

.Polaris-TopBar-SearchField__Input{
  font-size:var(--p-font-size-325);
  font-weight:var(--p-font-weight-regular);
  line-height:var(--p-font-line-height-500);
  border:none;
  letter-spacing:initial;
  z-index:var(--pc-search-field-input);
  height:2rem;
  width:100%;
  padding:0 calc(var(--pc-search-field-icon-size) + var(--p-space-300));
  border:var(--p-border-width-0165) solid var(--p-color-border-inverse);
  border-radius:var(--p-border-radius-200);
  background-color:transparent;
  outline:none;
  color:var(--p-color-text-inverse-secondary);
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:fill, color;
  transition:fill var(--p-motion-duration-200) var(--p-motion-ease), color var(--p-motion-duration-200) var(--p-motion-ease);
}

.Polaris-TopBar-SearchField__Input:hover{
    border-color:var(--p-color-border-inverse-hover);
  }

.Polaris-TopBar-SearchField__Input:active,
  .Polaris-TopBar-SearchField__Input:focus{
    box-shadow:inset 0 0 0 var(--p-border-width-025) var(--p-color-border-inverse-active);
  }

.Polaris-TopBar-SearchField__Input::placeholder{
    color:var(--p-color-text-inverse-secondary);
  }

.Polaris-TopBar-SearchField__Input::-webkit-search-decoration,
  .Polaris-TopBar-SearchField__Input::-webkit-search-cancel-button{
    -webkit-appearance:none;
            appearance:none;
  }

.Polaris-TopBar-SearchField__Icon{
  position:absolute;
  z-index:var(--pc-search-field-icon);
  top:50%;
  left:var(--p-space-200);
  display:flex;
  height:var(--pc-search-field-icon-size);
  width:var(--pc-search-field-icon-size);
  pointer-events:none;
  transform:translateY(-50%);
}

.Polaris-TopBar-SearchField__Icon svg{
    fill:var(--p-color-icon-secondary);
  }

.Polaris-TopBar-SearchField__Clear{
  position: relative;
  position:absolute;
  right:var(--p-space-100);
  z-index:var(--pc-search-field-action);
  border:none;
  -webkit-appearance:none;
          appearance:none;
  background:transparent;
  padding:var(--p-space-100);
}

.Polaris-TopBar-SearchField__Clear::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-200);
}

.Polaris-TopBar-SearchField__Clear svg{
    fill:var(--p-color-icon-secondary);
  }

.Polaris-TopBar-SearchField__Clear:focus,
  .Polaris-TopBar-SearchField__Clear:hover{
    outline:none;
  }

.Polaris-TopBar-SearchField__Clear:hover svg,
  .Polaris-TopBar-SearchField__Clear:focus svg{
    fill:var(--p-color-icon-inverse);
  }

.Polaris-TopBar-SearchField__Clear:focus-visible::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-TopBar-SearchField__Clear:active svg{
      fill:var(--p-color-icon-active);
    }

.Polaris-TopBar-SearchField__Clear:active::after{
      border:none;
    }

.Polaris-TopBar-SearchField__Backdrop{
  position:absolute;
  z-index:var(--pc-search-field-backdrop);
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:var(--p-color-bg-surface-inverse);
  border-radius:var(--p-border-radius-200);
}

.Polaris-TopBar-SearchField__Backdrop::after{
    content:none;
  }


.Polaris-MessageIndicator__MessageIndicatorWrapper{
  position:relative;
}

.Polaris-MessageIndicator{
  --pc-message-indicator-size:0.75rem;
  --pc-message-indicator-position:-0.1875rem;
  position:absolute;
  z-index:1;
  top:var(--pc-message-indicator-position);
  right:var(--pc-message-indicator-position);
  width:var(--pc-message-indicator-size);
  height:var(--pc-message-indicator-size);
  border-radius:var(--p-border-radius-full);
  background-color:var(--p-color-icon-info);
  border:solid var(--p-border-width-050) var(--p-color-bg);
}


.Polaris-Menu-Message__Section{
  max-width:20.3125rem;
  margin-top:var(--p-space-200);
  padding-top:var(--p-space-200);
  border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
}


.Polaris-TopBar-Menu__ActivatorWrapper{
  height:var(--pg-top-bar-height);
  display:flex;
  align-items:center;
}

.Polaris-TopBar-Menu__Activator{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  position: relative;
  color:var(--p-color-text-inverse);
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:auto;
  min-height:2rem;
  padding:var(--p-space-150);
  border:0;
  cursor:pointer;
  transition:background-color var(--p-motion-duration-100);
  margin-right:var(--p-space-200);
  border-radius:var(--p-border-radius-200);
  background-color:var(--p-color-bg-fill-inverse);
}

.Polaris-TopBar-Menu__Activator:focus{
    outline:none;
  }

.Polaris-TopBar-Menu__Activator::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-TopBar-Menu__Activator:focus{
    background-color:var(--p-color-bg-fill-inverse-hover);
    outline:none;
  }

.Polaris-TopBar-Menu__Activator:focus-visible{
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-050);
  }

.Polaris-TopBar-Menu__Activator:focus-visible::after{
    content:none;
  }

.Polaris-TopBar-Menu__Activator:hover{
    background-color:var(--p-color-bg-fill-inverse-hover);
  }

.Polaris-TopBar-Menu__Activator:active,
  .Polaris-TopBar-Menu__Activator[aria-expanded='true']{
    background-color:var(--p-color-bg-fill-inverse-active);
    outline:none;
    transition:none;
  }

.Polaris-TopBar-Menu__Activator:active::after, .Polaris-TopBar-Menu__Activator[aria-expanded='true']::after{
      border:none;
    }

.Polaris-TopBar-Menu__Activator:active p, .Polaris-TopBar-Menu__Activator[aria-expanded='true'] p{
      color:var(--p-color-text-inverse);
    }

@media (max-width: 47.9975em){

.Polaris-TopBar-Menu__Activator{
    margin-right:var(--p-space-200);
    background-color:var(--p-color-bg-inverse);
}

    .Polaris-TopBar-Menu__Activator:focus,
    .Polaris-TopBar-Menu__Activator:hover,
    .Polaris-TopBar-Menu__Activator:active,
    .Polaris-TopBar-Menu__Activator[aria-expanded='true']{
      opacity:0.85;
    }
  }

.Polaris-TopBar-Menu__Activator--userMenu{
  padding:var(--p-space-050);
}

.Polaris-TopBar-Menu__Section{
  margin-top:var(--p-space-200);
  padding-top:var(--p-space-200);
  border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);
}


.Polaris-TopBar-UserMenu__Details{
  max-width:10rem;
  margin-right:0;
  padding:0 var(--p-space-200) 0 0.625rem;
}
@media (max-width: 47.9975em){
  .Polaris-TopBar-UserMenu__Details{
    display:none;
}
  }


.Polaris-TopBar{
  position:relative;
  height:var(--pg-top-bar-height);
  box-shadow:var(--p-shadow-100);
  background-color:var(--p-color-bg-inverse);
  gap:var(--p-space-100);
}

@media (min-width: 48em){

.Polaris-TopBar{
    gap:var(--p-space-600);
    grid-template-columns:minmax(15rem, 1fr) minmax(auto, 30rem) 1fr;
}
  }

.Polaris-TopBar::after{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    border-bottom:var(--p-border-width-025) solid transparent;
  }

.Polaris-TopBar__Container{
  display:grid;
  grid-template-columns:1fr minmax(auto, 30rem) 1fr;
  align-items:center;
  width:calc(100vw - var(--pc-app-provider-scrollbar-width));
}

.Polaris-TopBar__LogoDisplayControl{
  display:none;
}

@media (min-width: 48em){

.Polaris-TopBar__LogoDisplayControl{
    display:flex;
}
  }

.Polaris-TopBar__LogoDisplayContainer{
  display:flex;
}

.Polaris-TopBar__LogoContainer{
  flex:0 0 var(--pg-layout-width-nav-base);
  align-items:center;
  height:100%;
  padding:0 var(--p-space-200) 0 var(--p-space-400);
  flex-basis: var(--pg-layout-width-nav-base);
  flex-basis: calc(var(--pg-layout-width-nav-base) + constant(safe-area-inset-left));
  flex-basis: calc(var(--pg-layout-width-nav-base) + env(safe-area-inset-left));
  padding-left: var(--p-space-400);
  padding-left: calc(var(--p-space-400) + constant(safe-area-inset-left));
  padding-left: calc(var(--p-space-400) + env(safe-area-inset-left));
}

.Polaris-TopBar__LogoContainer.Polaris-TopBar--hasLogoSuffix{
    gap:var(--p-space-200);
  }

.Polaris-TopBar__Logo,
.Polaris-TopBar__LogoLink{
  display:block;
}

.Polaris-TopBar__Logo:focus-visible, .Polaris-TopBar__LogoLink:focus-visible{
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-150);
    border-radius:var(--p-border-radius-200);
  }

.Polaris-TopBar__ContextControl{
  display:none;
}

@media (min-width: 48em){

.Polaris-TopBar__ContextControl{
    width:var(--pg-layout-width-nav-base);
    display:block;
}
  }

@media (min-width: 90em){

.Polaris-TopBar__ContextControl{
    width:var(--pg-layout-width-nav-base);
}
  }

.Polaris-TopBar__NavigationIcon{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  position:relative;
  align-self:center;
  margin-left:calc(var(--p-space-200) + var(--p-space-050));
  margin-right:var(--p-space-200);
  padding:var(--p-space-200);
  border-radius:var(--p-border-radius-100);
  color:var(--p-color-icon-inverse);
  transition:var(--p-motion-duration-150) color var(--p-motion-ease) var(--p-motion-duration-50);
}

.Polaris-TopBar__NavigationIcon:focus{
    outline:none;
  }

.Polaris-TopBar__NavigationIcon.Polaris-TopBar--focused:active{
    background-color:var(--p-color-bg-fill-inverse-hover);
  }

.Polaris-TopBar__NavigationIcon:hover{
    background-color:var(--p-color-bg-fill-inverse-hover);
  }

.Polaris-TopBar__NavigationIcon::after{
    content:'';
    position:absolute;
    top:calc(var(--p-space-200)*-1);
    left:calc(var(--p-space-200)*-1);
    width:calc(100% + var(--p-space-500));
    height:calc(100% + var(--p-space-500));
  }

@media (min-width: 48em){

.Polaris-TopBar__NavigationIcon{
    display:none;
}
  }

.Polaris-TopBar__NavigationIcon .Polaris-TopBar__IconWrapper{
    position: relative;
  }

.Polaris-TopBar__NavigationIcon .Polaris-TopBar__IconWrapper::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.4375rem;
  right: -0.4375rem;
  bottom: -0.4375rem;
  left: -0.4375rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.4375rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-TopBar__NavigationIcon:focus-visible:not(:active) .Polaris-TopBar__IconWrapper::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-TopBar__LeftContent{
  display:flex;
}

.Polaris-TopBar__Search{
  z-index:var(--p-z-index-1);
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  height:100%;
}

@media (min-width: 48em){

.Polaris-TopBar__Search{
    position:relative;
}
  }

.Polaris-TopBar__RightContent{
  display:flex;
  justify-content:flex-end;
}

.Polaris-TopBar__SecondaryMenu{
  margin-left:var(--p-space-200);
}

.Polaris-TopBar__SecondaryMenu svg{
  fill:var(--p-color-icon-inverse);
}


.Polaris-VideoThumbnail__Thumbnail{
  position:relative;
  padding-bottom:56.25%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  width:100%;
  height:100%;
}

.Polaris-VideoThumbnail__ThumbnailContainer{
  position:relative;
  height:100%;
}

.Polaris-VideoThumbnail__PlayButton{
  --pc-play-button-focused-state-overlay:rgba(223, 227, 232, 0.3);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding:0;
  border:none;
  background:transparent;
  transition:opacity var(--p-motion-duration-200) var(--p-motion-ease-in);
  cursor:pointer;
}

.Polaris-VideoThumbnail__PlayButton:focus{
    outline:none;
    box-shadow:inset 0.125rem 0 0 var(--p-color-border-focus);
    background-image:linear-gradient(
      var(--pc-play-button-focused-state-overlay),
      var(--pc-play-button-focused-state-overlay)
    );
  }

.Polaris-VideoThumbnail__PlayButton:focus .Polaris-VideoThumbnail__Timestamp{
      background-color:var(
        --p-color-video-thumbnail-play-button-bg-fill-hover
      );
    }

.Polaris-VideoThumbnail__PlayButton:hover .Polaris-VideoThumbnail__Timestamp{
    background-color:var(--p-color-video-thumbnail-play-button-bg-fill-hover);
  }

.Polaris-VideoThumbnail__PlayIcon{
  fill:var(--p-color-video-thumbnail-play-button-text-on-bg-fill);
}

.Polaris-VideoThumbnail__Timestamp{
  position:absolute;
  bottom:0;
  padding:var(--p-space-100) var(--p-space-200) var(--p-space-100) var(--p-space-100);
  margin-bottom:var(--p-space-400);
  margin-left:var(--p-space-400);
  border-radius:var(--p-border-radius-200);
  color:var(--p-color-video-thumbnail-play-button-text-on-bg-fill);
  background-color:var(--p-color-video-thumbnail-play-button-bg-fill);
  text-align:center;
  transition:background-color var(--p-motion-duration-200) var(--p-motion-ease-in);
}

.Polaris-VideoThumbnail__Progress{
  position:absolute;
  bottom:0;
  width:100%;
  background-color:var(--p-color-bg-surface);
  height:0.375rem;
  overflow:hidden;
}

.Polaris-VideoThumbnail__Indicator{
  height:inherit;
  width:100%;
  transform-origin:left;
  transform:scaleX(0);
  background-color:var(--p-color-bg-fill-brand);
  transition:transform var(--p-motion-duration-500) var(--p-motion-ease);
}

.Polaris-VideoThumbnail__ProgressBar,
.Polaris-VideoThumbnail__Label{
  position: absolute !important;
  top: 0;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
/**
 * Lunaria Loading Spinner Styles
 * Professional, elegant loading animation
 */

.lunaria-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
}

/* ========================================
   Spinner Container
   ========================================== */

.lunaria-spinner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinner Container selbst darf sich nicht drehen - nur die Ringe darin */
/* Höchste Spezifität um alle anderen CSS-Regeln zu überschreiben */
.lunaria-spinner,
div.lunaria-spinner,
.lunaria-loading-container .lunaria-spinner,
.lunaria-spinner.lunaria-spinner {
  animation: none !important;
  transform: none !important;
  rotate: none !important;
  will-change: auto !important;
}

/* Size variants */
.lunaria-spinner-small {
  width: 60px;
  height: 60px;
}

.lunaria-spinner-medium {
  width: 100px;
  height: 100px;
}

.lunaria-spinner-large {
  width: 140px;
  height: 140px;
}

/* ========================================
   Rotating Rings
   ========================================== */

.lunaria-spinner-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}

/* Outer ring - slow clockwise rotation with gradient */
.outer-ring {
  width: 100%;
  height: 100%;
  border-width: 3px;
  background: linear-gradient(
    45deg,
    transparent 50%,
    #818cf8 50%
  );
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
  animation: rotate-ring-slow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0.5;
}

/* Middle ring - faster counter-clockwise rotation */
.middle-ring {
  width: 75%;
  height: 75%;
  border-width: 2px;
  border-top-color: #a78bfa;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation: rotate-ring-fast 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite reverse;
  opacity: 0.4;
}

/* ========================================
   Logo Container - Stationary like a Moon
   ========================================== */

.lunaria-logo-container {
  position: absolute;
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Logo bleibt statisch wie ein Mond */
  filter: drop-shadow(0 0 15px rgba(129, 140, 248, 0.4));
  /* Runder Mask um weiße Ecken zu verstecken */
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
  z-index: 10;
}

/* KRITISCH: Logo Container darf sich NIEMALS drehen */
/* Höchste Spezifität um alle anderen CSS-Regeln zu überschreiben */
.lunaria-logo-container,
.lunaria-spinner .lunaria-logo-container,
div.lunaria-logo-container,
.lunaria-loading-container .lunaria-spinner .lunaria-logo-container,
.lunaria-logo-container.lunaria-logo-container,
div.lunaria-spinner .lunaria-logo-container,
.lunaria-spinner > .lunaria-logo-container {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  rotate: none !important;
}

.lunaria-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Stelle sicher dass Logo auf transparentem Hintergrund ist */
  background: transparent !important;
  mix-blend-mode: normal;
}

/* KRITISCH: Logo selbst darf sich NIEMALS drehen */
/* Höchste Spezifität um alle anderen CSS-Regeln zu überschreiben */
.lunaria-logo,
.lunaria-logo-container .lunaria-logo,
.lunaria-logo-container > img,
img.lunaria-logo,
.lunaria-spinner .lunaria-logo-container .lunaria-logo,
.lunaria-loading-container .lunaria-logo-container .lunaria-logo,
.lunaria-logo-container > img.lunaria-logo,
img.lunaria-logo.lunaria-logo,
div.lunaria-logo-container > img {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  rotate: none !important;
}

/* ========================================
   Orbiting Planets - Like planets around the moon
   ========================================== */

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px currentColor;
  z-index: 5;
}

.particle-1 {
  background: #818cf8;
  animation: particle-orbit-1 4s linear infinite;
}

.particle-2 {
  background: #60a5fa;
  animation: particle-orbit-2 3s linear infinite;
}

.particle-3 {
  background: #a78bfa;
  animation: particle-orbit-3 5s linear infinite;
}

/* ========================================
   Loading Text
   ========================================== */

.lunaria-loading-text {
  font-size: 1rem;
  color: var(--text-secondary, #8a8a8a);
  font-weight: 500;
  letter-spacing: 0.5px;
  animation: text-fade 1.5s ease-in-out infinite;
}

/* ========================================
   Keyframe Animations
   ========================================== */

/* Slow rotation for outer ring */
@keyframes rotate-ring-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Fast rotation for middle ring */
@keyframes rotate-ring-fast {
  0% {
    transform: rotate(0deg);
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.6;
  }
}

/* Planet orbit animations - 3 different orbits */
@keyframes particle-orbit-1 {
  0% {
    transform: rotate(0deg) translateX(55px) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  95% {
    opacity: 0.9;
  }
  100% {
    transform: rotate(360deg) translateX(55px) rotate(-360deg);
    opacity: 0;
  }
}

@keyframes particle-orbit-2 {
  0% {
    transform: rotate(120deg) translateX(45px) rotate(-120deg);
    opacity: 0;
  }
  5% {
    opacity: 0.85;
  }
  95% {
    opacity: 0.85;
  }
  100% {
    transform: rotate(480deg) translateX(45px) rotate(-480deg);
    opacity: 0;
  }
}

@keyframes particle-orbit-3 {
  0% {
    transform: rotate(240deg) translateX(50px) rotate(-240deg);
    opacity: 0;
  }
  5% {
    opacity: 0.8;
  }
  95% {
    opacity: 0.8;
  }
  100% {
    transform: rotate(600deg) translateX(50px) rotate(-600deg);
    opacity: 0;
  }
}

/* Text fade in/out */
@keyframes text-fade {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* ========================================
   Dark Mode Support
   ========================================== */

@media (prefers-color-scheme: dark) {
  .lunaria-logo-container {
    filter: drop-shadow(0 0 20px rgba(129, 140, 248, 0.5));
  }

  .lunaria-loading-text {
    color: var(--text-secondary, #b0b0b0);
  }
}

/* ========================================
   Reduced Motion Support
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  .lunaria-spinner-ring,
  .particle,
  .lunaria-logo-container {
    animation: none;
  }

  .outer-ring,
  .middle-ring {
    opacity: 0.5;
  }

  .lunaria-logo-container {
    opacity: 1;
  }

  .lunaria-loading-text {
    animation: none;
    opacity: 1;
  }
}
/**
 * Etchify Loading Spinner Styles
 * Professional, elegant loading animation with Origami Swan
 */

.etchify-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
}

/* ========================================
   Spinner Container
   ========================================== */

.etchify-spinner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinner Container stays stationary - only rings rotate */
.etchify-spinner,
div.etchify-spinner,
.etchify-loading-container .etchify-spinner,
.etchify-spinner.etchify-spinner {
  animation: none !important;
  transform: none !important;
  rotate: none !important;
  will-change: auto !important;
}

/* Size variants */
.etchify-spinner-small {
  width: 60px;
  height: 60px;
}

.etchify-spinner-medium {
  width: 100px;
  height: 100px;
}

.etchify-spinner-large {
  width: 140px;
  height: 140px;
}

/* ========================================
   Rotating Rings (Etchify Colors)
   ========================================== */

.etchify-spinner-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}

/* Outer ring - slow clockwise rotation with gradient */
.outer-ring {
  width: 100%;
  height: 100%;
  border-width: 3px;
  background: linear-gradient(
    45deg,
    transparent 50%,
    #667eea 50%
  );
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
  animation: rotate-ring-slow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0.6;
}

/* Middle ring - faster counter-clockwise rotation */
.middle-ring {
  width: 75%;
  height: 75%;
  border-width: 2px;
  border-top-color: #6d65cb;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation: rotate-ring-fast 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite reverse;
  opacity: 0.5;
}

/* ========================================
   Origami Swan Logo - Stationary & Elegant
   ========================================== */

.etchify-logo-container {
  position: absolute;
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Beautiful glow effect for the swan */
  filter: drop-shadow(0 0 20px rgba(109, 101, 203, 0.5));
  /* Round mask for clean edges */
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
  z-index: 10;
}

/* CRITICAL: Logo Container must NEVER rotate */
.etchify-logo-container,
.etchify-spinner .etchify-logo-container,
div.etchify-logo-container,
.etchify-loading-container .etchify-spinner .etchify-logo-container,
.etchify-logo-container.etchify-logo-container,
div.etchify-spinner .etchify-logo-container,
.etchify-spinner > .etchify-logo-container {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  rotate: none !important;
}

.etchify-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Show the colored logo */
  background: transparent !important;
  mix-blend-mode: normal;
}

/* CRITICAL: Logo itself must NEVER rotate */
.etchify-logo,
.etchify-logo-container .etchify-logo,
.etchify-logo-container > img,
img.etchify-logo,
.etchify-spinner .etchify-logo-container .etchify-logo,
.etchify-loading-container .etchify-logo-container .etchify-logo,
.etchify-logo-container > img.etchify-logo,
img.etchify-logo.etchify-logo,
div.etchify-logo-container > img {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  rotate: none !important;
}

/* ========================================
   Orbiting Particles (Etchify Blue/Purple)
   ========================================== */

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px currentColor;
  z-index: 5;
}

.particle-1 {
  background: #667eea;
  animation: particle-orbit-1 4s linear infinite;
}

.particle-2 {
  background: #6d65cb;
  animation: particle-orbit-2 3s linear infinite;
}

.particle-3 {
  background: #764ba2;
  animation: particle-orbit-3 5s linear infinite;
}

/* ========================================
   Loading Text
   ========================================== */

.etchify-loading-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  letter-spacing: 0.5px;
  animation: text-fade 1.5s ease-in-out infinite;
}

/* ========================================
   Keyframe Animations
   ========================================== */

/* Slow rotation for outer ring */
@keyframes rotate-ring-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Fast rotation for middle ring */
@keyframes rotate-ring-fast {
  0% {
    transform: rotate(0deg);
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.7;
  }
}

/* Particle orbit animations - 3 different orbits */
@keyframes particle-orbit-1 {
  0% {
    transform: rotate(0deg) translateX(55px) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  95% {
    opacity: 0.9;
  }
  100% {
    transform: rotate(360deg) translateX(55px) rotate(-360deg);
    opacity: 0;
  }
}

@keyframes particle-orbit-2 {
  0% {
    transform: rotate(120deg) translateX(45px) rotate(-120deg);
    opacity: 0;
  }
  5% {
    opacity: 0.85;
  }
  95% {
    opacity: 0.85;
  }
  100% {
    transform: rotate(480deg) translateX(45px) rotate(-480deg);
    opacity: 0;
  }
}

@keyframes particle-orbit-3 {
  0% {
    transform: rotate(240deg) translateX(50px) rotate(-240deg);
    opacity: 0;
  }
  5% {
    opacity: 0.8;
  }
  95% {
    opacity: 0.8;
  }
  100% {
    transform: rotate(600deg) translateX(50px) rotate(-600deg);
    opacity: 0;
  }
}

/* Text fade in/out */
@keyframes text-fade {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* ========================================
   Dark Mode Support
   ========================================== */

@media (prefers-color-scheme: dark) {
  .etchify-logo-container {
    filter: drop-shadow(0 0 25px rgba(109, 101, 203, 0.6));
  }
}

/* ========================================
   Reduced Motion Support (Accessibility)
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  .etchify-spinner-ring,
  .particle,
  .etchify-logo-container {
    animation: none;
  }

  .outer-ring,
  .middle-ring {
    opacity: 0.5;
  }

  .etchify-logo-container {
    opacity: 1;
  }

  .etchify-loading-text {
    animation: none;
    opacity: 1;
  }
}
/* WelcomeStep.css */

.welcome-step {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 60px 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Hero Section */
.welcome-hero {
  text-align: center;
  margin-bottom: 50px;
}

.welcome-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.welcome-hero h1 {
  font-size: 42px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-subtitle {
  font-size: 18px;
  color: #5a6c7d;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* Features Grid */
.welcome-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.feature-card {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-4px);
}

.feature-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.feature-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.feature-card p {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
  line-height: 1.5;
}

/* Info Boxes */
.welcome-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.info-box {
  background: #f0f7ff;
  border: 2px solid #bbdefb;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-box .info-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
  font-size: 14px;
  color: #1976d2;
}

.info-content strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

/* Actions */
.welcome-actions {
  text-align: center;
  margin-bottom: 30px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-large {
  padding: 16px 48px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Footer */
.welcome-footer {
  text-align: center;
  padding-top: 30px;
  border-top: 2px solid #f0f0f0;
}

.welcome-footer p {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
}

.welcome-footer a {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

.welcome-footer a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .welcome-step {
    padding: 40px 24px;
  }

  .welcome-hero h1 {
    font-size: 32px;
  }

  .welcome-subtitle {
    font-size: 16px;
  }

  .welcome-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .welcome-info {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feature-card {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .welcome-step {
    padding: 30px 20px;
  }

  .welcome-icon {
    font-size: 60px;
  }

  .welcome-hero h1 {
    font-size: 28px;
  }

  .welcome-features {
    grid-template-columns: 1fr;
  }

  .btn-large {
    width: 100%;
    padding: 14px 32px;
    font-size: 16px;
  }
}
/**
 * ProductSelectionStep Styles
 * Professional product grid for onboarding
 */

.product-selection-step {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.product-selection-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

/* ========================================
   Header
   ========================================== */

.product-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  gap: 20px;
}

.header-text h3 {
  font-size: 24px;
  margin-bottom: 8px;
  color: #333;
}

.header-text p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.header-stats {
  flex-shrink: 0;
}

.stat-badge {
  background: #5568d3 !important;  /* Force dark background */
  color: white !important;  /* Force white text */
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  letter-spacing: 0.3px;
}

/* ========================================
   Toolbar
   ========================================== */

.product-selection-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.search-box {
  flex: 1;
}

.search-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
}

.btn-sync {
  padding: 12px 20px;
  background: white;
  border: 2px solid #667eea;
  color: #667eea;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-sync:hover:not(:disabled) {
  background: #667eea;
  color: white;
}

.btn-sync:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   Product Grid
   ========================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.product-card {
  position: relative;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.product-card:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.product-card.enabled {
  border-color: #667eea;
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);  /* Light blue gradient */
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

/* Ensure text is readable on enabled cards */
.product-card.enabled .product-title {
  color: #1a237e;  /* Dark blue for contrast */
}

.product-card.enabled .product-price {
  color: #3f51b5;  /* Darker blue for contrast */
}

.product-card.enabled .product-type {
  background: rgba(63, 81, 181, 0.1);
  color: #1a237e;
}

/* Ensure text is readable on non-enabled (not configurator_enabled) cards */
.product-card:not(.enabled):not(.inactive) {
  background: #ffffff;  /* Clean white background */
}

.product-card:not(.enabled):not(.inactive) .product-title {
  color: #2c3e50 !important;  /* Dark text for visibility */
  font-weight: 600;
}

.product-card:not(.enabled):not(.inactive) .product-price {
  color: #667eea;  /* Purple for consistency */
}

.product-card:not(.enabled):not(.inactive) .product-type {
  background: #f0f0f0;
  color: #666;
}

.product-checkbox {
  position: absolute;
  top: 12px;
  right: 12px;
}

.product-checkbox input[type="checkbox"] {
  width: 24px;
  height: 24px;
  cursor: pointer;
  accent-color: #667eea;
}

.product-image {
  width: 100%;
  height: 180px;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f5f5 0%, #e9ecef 100%);
  gap: 8px;
}

.placeholder-icon {
  font-size: 48px;
  opacity: 0.3;
}

.placeholder-text {
  font-size: 13px;
  color: #adb5bd;
  font-weight: 500;
}

.product-info {
  padding: 12px;
  position: relative;
  z-index: 2;  /* Ensure product info is above inactive overlay */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
  line-height: 1.4;
  width: 100%;
  word-wrap: break-word;
  /* No line clamp - show full title */
}

.product-details {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-price {
  font-size: 16px;
  font-weight: 700;
  color: #667eea;
  margin: 0;
}

.product-type {
  display: inline-block;
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.product-variants {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.variant-badge {
  display: inline-block;
  background: #e3f2fd;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #1976d2;
  font-weight: 600;
}

.variant-badge.standard {
  background: #e8f5e9;
  color: #2e7d32;
}

.variant-breakdown {
  font-size: 11px;
  color: #ffffff;
  background: rgba(25, 118, 210, 0.15);
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.product-badge {
  position: absolute;
  top: 12px;  /* Moved to top */
  left: 12px;  /* Moved to left */
  background: #4caf50;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;  /* Above checkbox */
}

/* ========================================
   Initial Setup State
   ========================================== */

.initial-setup {
  text-align: center;
  padding: 80px 40px;
  background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
  border-radius: 16px;
  margin: 40px 0;
}

.initial-setup-icon {
  font-size: 80px;
  margin-bottom: 24px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.initial-setup h3 {
  font-size: 28px;
  color: #333;
  margin-bottom: 16px;
}

.initial-setup-description {
  font-size: 17px;
  color: #666;
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.btn-initial-sync {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 20px 60px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  margin-bottom: 20px;
}

.btn-initial-sync:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(102, 126, 234, 0.4);
}

.btn-initial-sync:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.initial-setup-hint {
  font-size: 14px;
  color: #999;
  font-style: italic;
  margin-top: 16px;
}

/* ========================================
   Empty States
   ========================================== */

.no-products,
.no-results {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.no-products-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.no-products h4 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #333;
}

.no-results {
  padding: 40px 20px;
}

/* ========================================
   Error State
   ========================================== */

.product-selection-error {
  background: #fee;
  border: 2px solid #fcc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  color: #c33;
  text-align: center;
}

/* ========================================
   Footer
   ========================================== */

.product-selection-footer {
  display: flex;
  justify-content: flex-start;  /* Für margin-left: auto Trick */
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #e0e0e0;
}

/* Button-Fixes für perfektes Alignment in Footer */
.product-selection-footer .btn-primary,
.product-selection-footer .btn-secondary {
  flex: 0 0 auto !important;
  min-width: 120px;
  max-width: 200px;
  margin: 0 !important;  /* Verhindert Y-Versatz */
}

.product-selection-footer .btn-secondary {
  border: 2px solid #d0d0d0 !important;  /* Rand für Zurück-Button */
}

.product-selection-footer .btn-primary {
  margin-left: auto !important;  /* Drückt Weiter-Button nach rechts */
  max-width: 300px;
  border: 2px solid transparent !important;  /* Gleiche Höhe wie Secondary */
}

/* Allgemeine Button-Styles (Fallback) */
.btn-primary,
.btn-secondary {
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  box-sizing: border-box;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  flex: 0 0 auto;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #5568d3;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.btn-secondary {
  background: #ecf0f1;
  color: #2c3e50;
  border: none;  /* Explizit: Kein Border */
}

.btn-secondary:hover {
  background: #f8f9ff;
}

.success-hint {
  text-align: center;
  color: #4caf50;
  font-weight: 600;
  margin-top: 16px;
  padding: 12px;
  background: #f1f8f4;
  border-radius: 8px;
}

/* ========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {
  .product-selection-header {
    flex-direction: column;
  }

  .product-selection-toolbar {
    flex-direction: column;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }

  .product-selection-footer {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    max-width: none;
  }
}

/* ========================================
   Product Status & Inactive Products
   ========================================== */

/* Product Options Display */
.product-options-info {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f8f9ff;
  border-radius: 6px;
  border-left: 3px solid #667eea;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-options-info.no-options {
  border-left-color: #9e9e9e;
  background: #fafbfc;
}

.product-options-info .options-count {
  font-size: 13px;
  font-weight: 600;
  color: #667eea;
}

.product-options-info.no-options .options-count {
  color: #666;
}

.product-options-info .options-list {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.product-options-info .options-hint {
  font-size: 12px;
  color: #999;
  font-style: italic;
}

.product-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-status.status-active {
  background: #e8f5e9;
  color: #2e7d32;
}

.product-status.status-inactive {
  background: #ffebee;
  color: #c62828;
}

.product-card.inactive {
  opacity: 1;  /* Full opacity so content is visible */
  position: relative;
  border-color: #ffb74d;  /* Orange border for inactive */
  background: #fff8f0;  /* Light orange tint */
}

.product-card.inactive:hover {
  border-color: #ffa726;
  transform: none;
  box-shadow: 0 4px 12px rgba(255, 167, 38, 0.2);
}

/* Ensure text is readable on inactive cards */
.product-card.inactive .product-title {
  color: #333 !important;  /* Dark text for visibility */
  font-weight: 600;
}

.product-card.inactive .product-price {
  color: #e65100;  /* Dark orange */
}

.product-card.inactive .product-type {
  background: rgba(230, 81, 0, 0.1);
  color: #e65100;
}

.product-card.inactive .product-image {
  opacity: 0.85;  /* Slightly faded but still visible */
}

.product-inactive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);  /* More transparent */
  backdrop-filter: blur(0.5px);  /* Minimal blur */
  display: flex;
  align-items: flex-start;  /* Position label at top */
  justify-content: center;
  padding-top: 70px;  /* Position label in upper part of image */
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;  /* Ensure overlay is below product info */
}

.inactive-label {
  background: #ff9800;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.product-checkbox input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   Blocked Products (3 Options)
   ========================================== */

.product-card.too-many-options {
  border: 2px solid #ff9800;
  background: #fff8f0;
  pointer-events: none;
  position: relative;
}

.product-card.too-many-options .product-checkbox input {
  cursor: not-allowed;
}

.product-blocked-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 152, 0, 0.95);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 5;
}

.blocked-content {
  text-align: center;
  color: white;
  max-width: 280px;
}

.blocked-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.blocked-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.blocked-message {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.95);
}

.blocked-message strong {
  font-weight: 700;
  text-decoration: underline;
}

.blocked-hint {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 12px;
  font-weight: 500;
}

/* Warning styling for options display */
.product-options-info.warning {
  background: #fff3e0;
  border: 1px solid #ff9800;
  border-radius: 6px;
  padding: 8px 10px;
}

.product-options-info .options-count.full {
  color: #e65100;
  font-weight: 700;
}

/* ========================================
   Product Toggling Animation
   ========================================== */

.product-card.toggling {
  pointer-events: none;  /* Prevent clicks during toggle */
  position: relative;
}

.product-toggling-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(102, 126, 234, 0.1);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  z-index: 10;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.toggling-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Variant Selection Step Styles */

.variant-selection-step {
  max-width: 900px;
  margin: 0 auto;
}

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

.step-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.step-header p {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
  line-height: 1.5;
}

/* Selection Summary */
.selection-summary {
  background: #f8f9ff;
  border: 2px solid #667eea;
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
  text-align: center;
}

.summary-count {
  font-size: 18px;
  font-weight: 600;
  color: #667eea;
}

/* Products List */
.products-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

/* Product Card */
.product-card {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.product-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

/* Disabled Product Card (single variant) */
.product-card.disabled {
  opacity: 0.6;
  background: #f8f9fa;
  border-color: #dee2e6;
}

.product-card.disabled:hover {
  border-color: #dee2e6;
  box-shadow: none;
  cursor: not-allowed;
}

.product-card.disabled .product-header {
  cursor: not-allowed;
}

.product-card.disabled .product-header:hover {
  background: #f8f9fa;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  user-select: none;
  background: #f8f9fa;
}

.product-header:hover {
  background: #f1f3f5;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.product-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.expand-icon {
  font-size: 16px;
  color: #667eea;
  transition: transform 0.2s ease;
  display: inline-block;
  width: 24px;
  text-align: center;
  font-weight: bold;
}

.product-info h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.variant-count {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

.single-variant-note {
  color: #28a745;
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
}

.btn-toggle-all {
  padding: 8px 16px;
  background: white;
  border: 2px solid #667eea;
  border-radius: 6px;
  color: #667eea;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-toggle-all:hover {
  background: #667eea;
  color: white;
}

/* Variants List */
.variants-list {
  padding: 15px 20px 20px;
  background: white;
  border-top: 1px solid #e9ecef;
}

.variant-item {
  padding: 12px 15px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.variant-item:hover {
  background: #f8f9fa;
}

.variant-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.variant-checkbox input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 22px;
  height: 22px;
  border: 2px solid #ced4da;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.variant-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  background: #667eea;
  border-color: #667eea;
}

.variant-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.variant-title {
  font-size: 15px;
  color: #2c3e50;
  font-weight: 500;
  flex: 1;
}

.variant-sku {
  font-size: 13px;
  color: #7f8c8d;
  font-family: 'Courier New', monospace;
}

/* Loading State */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-state p {
  font-size: 16px;
  color: #7f8c8d;
}

/* Error State */
.error-state {
  text-align: center;
  padding: 60px 20px;
}

.error-state p {
  font-size: 18px;
  color: #e74c3c;
  margin-bottom: 20px;
}

/* Step Actions */
.step-actions {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #e9ecef;
}

.btn-primary,
.btn-secondary {
  padding: 14px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  flex: 1;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover:not(:disabled) {
  background: #f8f9ff;
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  .variant-selection-step {
    padding: 15px;
  }

  .step-header h2 {
    font-size: 24px;
  }

  .product-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .product-actions {
    width: 100%;
    justify-content: space-between;
  }

  .step-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
}
/**
 * BrandingStep Styles
 * Professional branding configuration UI
 */

.branding-step {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* ========================================
   Header
   ========================================== */

.branding-header {
  text-align: center;
  margin-bottom: 40px;
}

.branding-header h3 {
  font-size: 28px;
  margin-bottom: 12px;
  color: #333;
}

.branding-header p {
  font-size: 16px;
  color: #666;
  margin-bottom: 12px;
}

.optional-badge {
  display: inline-block;
  background: #f0f0f0;
  color: #666;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

/* ========================================
   Content
   ========================================== */

.branding-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.branding-section {
  background: #f8f9ff;
  border-radius: 12px;
  padding: 30px;
}

.branding-section h4 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
}

.section-description {
  font-size: 14px;
  color: #333;  /* Schwarz statt grau für bessere Lesbarkeit */
  margin-bottom: 24px;
}

/* ========================================
   Logo Upload
   ========================================== */

.logo-upload-area {
  margin-bottom: 20px;
}

.logo-upload-placeholder {
  border: 3px dashed #667eea;
  border-radius: 12px;
  padding: 60px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.logo-upload-placeholder:hover {
  border-color: #5568d3;
  background: #f8f9ff;
  transform: translateY(-2px);
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.upload-text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.upload-hint {
  font-size: 13px;
  color: #999;
}

.logo-preview {
  text-align: center;
}

.logo-preview img {
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 12px;
  background: white;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-change-logo {
  padding: 12px 24px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-change-logo:hover:not(:disabled) {
  background: #5568d3;
  transform: translateY(-1px);
}

.btn-change-logo:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.upload-progress {
  margin-top: 16px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: width 0.3s;
}

.upload-progress p {
  font-size: 13px;
  color: #666;
  text-align: center;
}

/* ========================================
   Color Pickers
   ========================================== */

.color-pickers {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.color-picker-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.color-input-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
}

.color-input {
  width: 60px;
  height: 60px;
  border: 3px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.color-input:hover {
  border-color: #667eea;
}

.color-text-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  font-family: 'Monaco', 'Courier New', monospace;
  transition: border-color 0.2s;
}

.color-text-input:focus {
  outline: none;
  border-color: #667eea;
}

.color-preview {
  width: 100%;
  height: 100px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================
   Messages
   ========================================== */

.branding-error {
  background: #fee;
  border: 2px solid #fcc;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  color: #c33;
  font-size: 14px;
  text-align: center;
}

.branding-success {
  background: #efe;
  border: 2px solid #cfc;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  color: #3a3;
  font-size: 14px;
  text-align: center;
}

/* ========================================
   Footer
   ========================================== */

.branding-footer {
  display: flex;
  justify-content: flex-start;  /* Für margin-left: auto Trick */
  align-items: center;
  gap: 16px;
  padding-top: 30px;
  border-top: 2px solid #e0e0e0;
}

/* Button-Fixes für perfektes Alignment */
.branding-footer .btn-primary,
.branding-footer .btn-secondary,
.branding-footer .btn-skip {
  flex: 0 0 auto !important;
  min-width: 120px;
  max-width: 200px;
  margin: 0 !important;  /* Verhindert Y-Versatz */
}

.branding-footer .btn-secondary {
  border: 2px solid #d0d0d0 !important;  /* Rand für Zurück */
}

.branding-footer .btn-skip {
  border: 2px solid #e0e0e0 !important;  /* Rand für Überspringen */
}

.branding-footer .btn-primary {
  margin-left: auto !important;  /* Drückt letzten Button nach rechts */
  max-width: 300px;
  border: 2px solid transparent !important;  /* Gleiche Höhe */
}

/* Allgemeine Button-Styles */
.btn-primary,
.btn-secondary,
.btn-skip {
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover {
  background: #5568d3;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #f8f9ff;
}

.btn-skip {
  background: transparent;
  color: #999;
  border: 2px solid #e0e0e0;
}

.btn-skip:hover {
  color: #667eea;
  border-color: #667eea;
  background: #f8f9ff;
}

/* ========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {
  .branding-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .branding-footer {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary,
  .btn-skip {
    width: 100%;
  }
}
/* OnboardingWizard.css */

.onboarding-wizard {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

/* Progress Header */
.wizard-progress-header {
  background: white;
  border-radius: 12px;
  padding: 24px 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.wizard-header-with-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.wizard-logo {
  width: 40px;
  height: 40px;
}

.progress-info h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
}

.progress-info p {
  font-size: 15px;
  color: #7f8c8d;
  margin: 0;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.progress-bar {
  flex: 1;
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: width 0.5s ease;
}

.progress-percentage {
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
  min-width: 45px;
  text-align: right;
}

/* Step Indicators */
.step-indicators {
  display: flex;
  justify-content: space-between;
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  gap: 8px;
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 80px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.step-indicator.active {
  opacity: 1;
}

.step-indicator.completed {
  opacity: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.step-indicator.active .step-number {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.step-indicator.completed .step-number {
  background: #4caf50;
  color: white;
}

.step-label {
  font-size: 12px;
  color: #6c757d;
  text-align: center;
  font-weight: 500;
}

.step-indicator.active .step-label {
  color: #2c3e50;
  font-weight: 600;
}

.step-indicator.completed .step-label {
  color: #4caf50;
}

/* Error Display */
.wizard-error {
  background: #ffebee;
  border-left: 4px solid #f44336;
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c62828;
}

.wizard-error strong {
  font-weight: 600;
}

.wizard-error button {
  background: none;
  border: none;
  color: #c62828;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.wizard-error button:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Step Content */
.wizard-content {
  background: transparent;
}

/* Responsive */
@media (max-width: 1024px) {
  .step-indicators {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .step-indicator {
    min-width: 70px;
  }

  .step-number {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .step-label {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .onboarding-wizard {
    padding: 15px;
  }

  .wizard-progress-header {
    padding: 20px;
  }

  .progress-info h2 {
    font-size: 20px;
  }

  .progress-info p {
    font-size: 14px;
  }

  .step-indicators {
    padding: 15px;
  }

  .step-indicator {
    min-width: 60px;
  }

  .step-number {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .step-label {
    font-size: 10px;
  }
}
/* SetupGate Component Styles */

.setup-gate-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

/* Loading spinner styles moved to EtchifyLoadingSpinner.css */

/* Onboarding Wizard */
.setup-gate-onboarding {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px 20px 80px;
  display: flex;
  align-items: flex-start;  /* Align to top instead of center */
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
}

.onboarding-container {
  background: white;
  border-radius: 12px;
  padding: 40px;
  max-width: 800px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  margin: 20px auto 40px;  /* Margin top and bottom for spacing */
}

.onboarding-header {
  text-align: center;
  margin-bottom: 30px;
  padding-top: 20px;
  position: relative;  /* Ensure stable positioning */
}

.onboarding-logo {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;  /* Removed top margin to prevent shifting */
  display: block;
  object-fit: contain;
  flex-shrink: 0;  /* Prevent logo from shrinking */
}

.onboarding-container h1 {
  font-size: 32px;
  margin-bottom: 10px;
  color: #333;
}

.shop-name {
  color: #667eea;
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 500;
}

.onboarding-steps h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.step-indicator {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
  gap: 10px;
}

.step {
  flex: 1;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: #666;
  transition: all 0.3s ease;
}

.step.clickable {
  cursor: pointer;
}

.step.clickable:hover:not(.active) {
  background: #e8e8e8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.step.active {
  background: #667eea;
  color: white;
  font-weight: 600;
  transform: scale(1.05);
}

.onboarding-content {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 30px;
  margin-top: 20px;
  min-height: 400px;
}

.welcome-step h3,
.product-mapping-step h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
}

.welcome-step ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.welcome-step li {
  padding: 10px 0;
  font-size: 16px;
  color: #555;
}

.btn-primary {
  background: #667eea;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 20px;
}

.btn-primary:hover {
  background: #5568d3;
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.btn-secondary:hover {
  background: #667eea;
  color: white;
}

.mapping-placeholder {
  text-align: center;
  padding: 40px 20px;
}

.developer-badge {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  border-radius: 4px;
  color: #856404;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  font-size: 14px;
}

/* Customer Blocked State */
.setup-gate-blocked {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.blocked-container {
  background: white;
  border-radius: 12px;
  padding: 60px 40px;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.blocked-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.blocked-container h1 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #333;
}

.blocked-container p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.blocked-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.blocked-footer small {
  color: #999;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  .step-indicator {
    flex-direction: column;
  }

  .step {
    width: 100%;
  }

  .onboarding-container {
    padding: 30px 20px;
  }

  .onboarding-container h1 {
    font-size: 24px;
  }
}
/**
 * Dashboard Page Styles
 */

.dashboard-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Header */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 2px solid #e0e0e0;
}

.dashboard-welcome h1 {
  font-size: 32px;
  margin-bottom: 8px;
  color: #333;
}

.shop-domain {
  font-size: 16px;
  color: #667eea;
  font-weight: 500;
}

.dashboard-logo {
  flex-shrink: 0;
}

.dashboard-logo img {
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
}

/* Stats Cards */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
}

.stat-icon {
  font-size: 40px;
}

.stat-info h3 {
  font-size: 28px;
  margin-bottom: 4px;
}

.stat-info p {
  font-size: 14px;
  opacity: 0.9;
}

/* Quick Actions */
.dashboard-quick-actions h2 {
  font-size: 24px;
  margin-bottom: 24px;
  color: #333;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.action-card {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 30px;
  text-decoration: none;
  transition: all 0.2s;
  display: block;
}

.action-card:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.action-icon {
  font-size: 36px;
  margin-bottom: 16px;
}

.action-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
}

.action-card p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
}
/**
 * Branding Settings Page Styles
 */

.branding-settings-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.settings-header {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 2px solid #e0e0e0;
}

.settings-header h1 {
  font-size: 32px;
  margin-bottom: 8px;
  color: #333;
}

.settings-header p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.success-message {
  background: #d4edda;
  border: 2px solid #c3e6cb;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 30px;
  color: #155724;
  font-weight: 600;
  text-align: center;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-content {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .settings-content {
    padding: 20px;
  }
}
/* NavigationBreadcrumb - Notion-Style */

.navigation-breadcrumb {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--app-bg-white, white);
  border-bottom: 1px solid var(--app-border, #e0e0e0);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
}

.breadcrumb-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--app-text-secondary, #666);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  max-width: 250px;
}

.breadcrumb-item:hover:not(:disabled) {
  background: var(--app-bg-hover, #f5f5f5);
  color: var(--app-text-primary, #2c3e50);
}

.breadcrumb-item:active:not(:disabled) {
  transform: scale(0.98);
}

.breadcrumb-item.active {
  color: var(--app-text-primary, #2c3e50);
  font-weight: 600;
  cursor: default;
  background: var(--app-bg-secondary, #f8f9fa);
}

.breadcrumb-item:disabled {
  cursor: default;
}

.breadcrumb-home {
  color: #3498db;
  font-weight: 600;
}

.breadcrumb-home:hover {
  background: rgba(52, 152, 219, 0.1);
  color: #2980b9;
}

.breadcrumb-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.breadcrumb-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb-separator {
  color: var(--app-border, #ccc);
  font-size: 0.9rem;
  user-select: none;
  margin: 0 0.25rem;
}

.breadcrumb-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.depth-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .navigation-breadcrumb {
    padding: 0.5rem 1rem;
  }

  .breadcrumb-item {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    max-width: 150px;
  }

  .breadcrumb-icon {
    font-size: 1rem;
  }

  .breadcrumb-text {
    display: none;
  }

  .breadcrumb-item.active .breadcrumb-text {
    display: inline;
  }

  .depth-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
  }
}

/* Animation beim Einblenden */
.navigation-breadcrumb {
  animation: breadcrumbSlideIn 0.3s ease;
}

@keyframes breadcrumbSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* HomeScreen - Modern Professional Design */

.home-screen {
  min-height: 100vh;
  padding: 2rem;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.home-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Navigation Cards */
.home-navigation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
  margin-top: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .home-navigation {
    grid-template-columns: 1fr;
    max-width: 700px;
  }
}

.nav-card {
  background: var(--app-card-bg, #ffffff);
  border-radius: 16px;
  padding: 2.5rem;
  border: 1.5px solid var(--app-border, #e2e8f0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nav-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--app-accent, #667eea) 0%, #818cf8 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
  border-color: var(--app-accent, #667eea);
}

.nav-card:hover::before {
  opacity: 1;
}

/* Dark Mode Cards */
.dark-mode .nav-card {
  background: var(--app-card-bg, #1e293b);
  border-color: var(--app-border, #334155);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .nav-card:hover {
  border-color: var(--app-accent, #818cf8);
  box-shadow: 0 8px 24px rgba(129, 140, 248, 0.15);
}

/* Card Icons - SVG Styling */
.nav-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.5rem;
  color: var(--app-accent, #667eea);
  transition: all 0.3s ease;
}

.nav-card:hover .nav-card-icon {
  color: var(--app-accent-hover, #5568d3);
  transform: scale(1.1);
}

.dark-mode .nav-card-icon {
  color: var(--app-accent, #818cf8);
}

.nav-card-icon svg {
  width: 100%;
  height: 100%;
}

/* Card Headings */
.nav-card h2 {
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  color: var(--app-text-primary, #1a202c);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.dark-mode .nav-card h2 {
  color: var(--app-text-primary, #f8fafc);
}

.nav-card > p {
  color: var(--app-text-secondary, #475569);
  font-size: 0.95rem;
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
}

.dark-mode .nav-card > p {
  color: var(--app-text-secondary, #cbd5e1);
}

/* Feature Lists */
.nav-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  flex-grow: 1;
}

.nav-card-features li {
  padding: 0.75rem 0;
  padding-left: 1.5rem;
  color: var(--app-text-secondary, #475569);
  font-size: 0.9rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--app-border, #e2e8f0);
  transition: all 0.2s ease;
  position: relative;
}

.nav-card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-accent, #667eea);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.nav-card-features li:hover {
  color: var(--app-text-primary, #1a202c);
  padding-left: 2rem;
}

.nav-card-features li:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1.3);
}

.nav-card-features li:last-child {
  border-bottom: none;
}

.dark-mode .nav-card-features li {
  color: var(--app-text-secondary, #cbd5e1);
  border-bottom-color: var(--app-border, #334155);
}

.dark-mode .nav-card-features li:hover {
  color: var(--app-text-primary, #f8fafc);
}

.dark-mode .nav-card-features li::before {
  background: var(--app-accent, #818cf8);
}

/* Badges */
.nav-card-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: var(--app-accent-light, #e0e7ff);
  color: var(--app-accent, #667eea);
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.dark-mode .nav-card-badge {
  background: rgba(129, 140, 248, 0.2);
  color: var(--app-accent, #818cf8);
}

/* Call-to-Action Buttons */
.nav-card-btn {
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: var(--app-accent, #667eea);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: auto;
  letter-spacing: 0.01em;
}

.nav-card-btn:hover {
  background: var(--app-accent-hover, #5568d3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nav-card-btn:active {
  transform: translateY(0);
}

.dark-mode .nav-card-btn {
  background: var(--app-accent, #818cf8);
}

.dark-mode .nav-card-btn:hover {
  background: #6366f1;
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}

/* Info Cards */
.home-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.info-card {
  background: var(--app-card-bg, #ffffff);
  border-radius: 12px;
  padding: 1.75rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border: 1.5px solid var(--app-border, #e2e8f0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.08);
  border-color: var(--app-accent, #667eea);
}

.dark-mode .info-card {
  background: var(--app-card-bg, #1e293b);
  border-color: var(--app-border, #334155);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .info-card:hover {
  box-shadow: 0 6px 16px rgba(129, 140, 248, 0.12);
  border-color: var(--app-accent, #818cf8);
}

/* Info Icons - SVG Styling */
.info-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--app-accent, #667eea);
  transition: all 0.3s ease;
}

.info-card:hover .info-icon {
  color: var(--app-accent-hover, #5568d3);
  transform: scale(1.1);
}

.dark-mode .info-icon {
  color: var(--app-accent, #818cf8);
}

.info-icon svg {
  width: 100%;
  height: 100%;
}

.info-card strong {
  display: block;
  color: var(--app-text-primary, #1a202c);
  font-size: 1rem;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.dark-mode .info-card strong {
  color: var(--app-text-primary, #f8fafc);
}

.info-card p {
  margin: 0;
  color: var(--app-text-secondary, #475569);
  font-size: 0.875rem;
  line-height: 1.6;
}

.dark-mode .info-card p {
  color: var(--app-text-secondary, #cbd5e1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .home-screen {
    padding: 1rem;
  }

  .home-navigation {
    gap: 1rem;
  }

  .nav-card {
    padding: 1.5rem;
  }

  .nav-card h2 {
    font-size: 1.35rem;
  }

  .nav-card-icon {
    width: 40px;
    height: 40px;
  }

  .home-info {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .info-card {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .home-screen {
    padding: 0.75rem;
  }

  .nav-card {
    padding: 1.25rem;
    border-radius: 12px;
  }

  .nav-card h2 {
    font-size: 1.25rem;
  }

  .nav-card-icon {
    width: 36px;
    height: 36px;
  }

  .info-card {
    padding: 1rem;
  }

  .info-icon {
    width: 28px;
    height: 28px;
  }
}

/* Touch-Friendly */
@media (hover: none) and (pointer: coarse) {
  .nav-card:hover {
    transform: none;
  }

  .nav-card:active {
    transform: scale(0.98);
    opacity: 0.95;
  }
}
/* Delete Confirmation Modal */

.delete-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.delete-modal {
  background: var(--app-card-bg, #ffffff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 480px;
  padding: 2rem;
  animation: slideUp 0.3s ease-out;
  border: 1px solid var(--app-border-light, rgba(0, 0, 0, 0.1));
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.delete-modal-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.delete-icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.15) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.delete-modal-content {
  text-align: center;
  margin-bottom: 2rem;
}

.delete-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--app-text-primary, #1f2937);
  margin: 0 0 0.75rem 0;
}

.delete-modal-message {
  font-size: 1rem;
  color: var(--app-text-secondary, #6b7280);
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.delete-modal-message strong {
  color: var(--app-text-primary, #1f2937);
  font-weight: 600;
}

.delete-modal-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid #ef4444;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #dc2626;
  margin: 0;
  font-weight: 500;
}

.delete-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.delete-modal-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.delete-modal-btn-cancel {
  background: var(--app-bg-secondary, #f3f4f6);
  color: var(--app-text-primary, #374151);
  border: 2px solid var(--app-border, #e5e7eb);
}

.delete-modal-btn-cancel:hover {
  background: var(--app-bg-tertiary, #e5e7eb);
  transform: translateY(-1px);
}

.delete-modal-btn-delete {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.delete-modal-btn-delete:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.delete-modal-btn-delete:active {
  transform: translateY(0);
}

/* Dark Mode Support */

.dark-mode .delete-modal {
    background: var(--app-card-bg, #1f2937);
    border-color: rgba(255, 255, 255, 0.1);
  }

.dark-mode .delete-modal-title {
    color: var(--app-text-primary, #f9fafb);
  }

.dark-mode .delete-modal-message {
    color: var(--app-text-secondary, #d1d5db);
  }

.dark-mode .delete-modal-message strong {
    color: var(--app-text-primary, #f9fafb);
  }

.dark-mode .delete-modal-btn-cancel {
    background: #374151;
    color: #f9fafb;
    border-color: #4b5563;
  }

.dark-mode .delete-modal-btn-cancel:hover {
    background: #4b5563;
  }

.dark-mode .delete-icon-circle {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.2) 100%);
  }


/* Responsive */
@media (max-width: 640px) {
  .delete-modal {
    padding: 1.5rem;
  }

  .delete-icon-circle {
    width: 64px;
    height: 64px;
  }

  .delete-icon-circle svg {
    width: 36px;
    height: 36px;
  }

  .delete-modal-title {
    font-size: 1.25rem;
  }

  .delete-modal-message {
    font-size: 0.9rem;
  }

  .delete-modal-actions {
    flex-direction: column-reverse;
  }

  .delete-modal-btn {
    width: 100%;
    justify-content: center;
  }
}
/* Info Tooltip Bar - Moderne aufklappbare Erklärungsleiste */

.info-tooltip-bar {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

/* Varianten */
.info-tooltip-bar.variant-default {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  border: 2px solid rgba(102, 126, 234, 0.2);
}

.info-tooltip-bar.variant-designs {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(123, 31, 162, 0.08) 100%);
  border: 2px solid rgba(156, 39, 176, 0.2);
}

.info-tooltip-bar.variant-projects {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(56, 142, 60, 0.08) 100%);
  border: 2px solid rgba(76, 175, 80, 0.2);
}

.info-tooltip-bar.variant-inspirations {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.08) 0%, rgba(245, 124, 0, 0.08) 100%);
  border: 2px solid rgba(255, 152, 0, 0.2);
}

/* Expanded State */
.info-tooltip-bar.expanded {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Toggle Button */
.tooltip-toggle {
  width: 100%;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
}

.tooltip-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.toggle-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start;
}

.toggle-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.toggle-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  flex: 1;
  text-align: left;
}

.toggle-arrow {
  font-size: 0.8rem;
  color: var(--app-text-secondary, #666);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.toggle-arrow.up {
  transform: rotate(0deg);
}

.toggle-arrow.down {
  transform: rotate(0deg);
}

/* Tooltip Content */
.tooltip-content {
  padding: 0 1.5rem 1.5rem;
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tooltip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.tooltip-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.tooltip-item:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(4px);
}

.tooltip-check {
  font-weight: bold;
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1.5;
}

/* Varianten-spezifische Check-Farben */
.variant-default .tooltip-check {
  color: #667eea;
}

.variant-designs .tooltip-check {
  color: #9c27b0;
}

.variant-projects .tooltip-check {
  color: #4caf50;
}

.variant-inspirations .tooltip-check {
  color: #ff9800;
}

.tooltip-text {
  font-size: 0.95rem;
  color: var(--app-text-secondary, #666);
  line-height: 1.5;
  flex: 1;
}

/* Dark Mode Support */
.dark-mode .info-tooltip-bar.variant-default {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  border-color: rgba(102, 126, 234, 0.3);
}

.dark-mode .info-tooltip-bar.variant-designs {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(123, 31, 162, 0.15) 100%);
  border-color: rgba(156, 39, 176, 0.3);
}

.dark-mode .info-tooltip-bar.variant-projects {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.15) 100%);
  border-color: rgba(76, 175, 80, 0.3);
}

.dark-mode .info-tooltip-bar.variant-inspirations {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(245, 124, 0, 0.15) 100%);
  border-color: rgba(255, 152, 0, 0.3);
}

.dark-mode .tooltip-toggle:hover {
  background: rgba(0, 0, 0, 0.2);
}

.dark-mode .tooltip-item:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dark-mode .toggle-text {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .toggle-arrow {
  color: rgba(129, 140, 248, 0.7);
}

.dark-mode .tooltip-text {
  color: rgba(129, 140, 248, 0.8);
}

/* Responsive */
@media (max-width: 768px) {
  .tooltip-toggle {
    padding: 0.875rem 1.25rem;
  }

  .toggle-text {
    font-size: 0.95rem;
  }

  .tooltip-content {
    padding: 0 1.25rem 1.25rem;
  }

  .tooltip-item {
    padding: 0.4rem;
  }

  .tooltip-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .toggle-content {
    gap: 0.5rem;
  }

  .toggle-icon {
    font-size: 1.2rem;
  }

  .toggle-text {
    font-size: 0.9rem;
  }
}
/**
 * Unified Export & Share Dialog - Professionelles, modernes Design
 */

/* Overlay */
.unified-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 999999; /* ✅ Sehr hoher z-index über Header/Footer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem; /* ✅ Mehr Abstand zum Header/Footer */
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Dialog */
.unified-dialog {
  width: 90vw;
  max-width: 1100px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Header */
.unified-header {
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unified-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.unified-header .btn-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unified-header .btn-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Mode Toggle */
.mode-toggle {
  display: flex;
  background: #f8f9fa;
  border-bottom: 2px solid #e9ecef;
  padding: 0.5rem;
  gap: 0.5rem;
}

.mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  border-radius: 8px;
}

.mode-btn:hover {
  background: rgba(102, 126, 234, 0.05);
  color: #667eea;
}

.mode-btn.active {
  color: #667eea;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mode-icon {
  font-size: 1.25rem;
}

.mode-label {
  font-size: 1rem;
}

/* Content Layout */
.unified-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  gap: 2rem;
  padding: 2rem;
}

/* Settings Panel */
.settings-panel {
  flex: 1;
  min-width: 320px;
  max-width: 400px;
}

.settings-panel > h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c3e50;
}

.setting-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

.setting-section:last-child {
  border-bottom: none;
}

.setting-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
}

/* Checkbox Options */
.setting-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.setting-checkbox:hover {
  background: #e9ecef;
  border-color: #667eea;
}

.setting-checkbox input[type="checkbox"] {
  margin: 0.25rem 0 0 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #667eea;
  flex-shrink: 0;
}

.checkbox-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.checkbox-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
}

.checkbox-hint {
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.4;
}

.setting-checkbox input[type="checkbox"]:checked ~ .checkbox-content .checkbox-label {
  color: #667eea;
}

/* Radio Options */
.setting-radio {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.setting-radio:hover {
  background: #e9ecef;
  border-color: #667eea;
}

.setting-radio input[type="radio"] {
  margin: 0 0.75rem 0 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #667eea;
}

.setting-radio input[type="radio"]:checked + span {
  font-weight: 600;
  color: #667eea;
}

.setting-radio span {
  flex: 1;
  font-size: 0.95rem;
  color: #2c3e50;
}

/* Select Dropdown */
.setting-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #2c3e50;
  cursor: pointer;
  transition: all 0.2s;
}

.setting-select:hover {
  background: #e9ecef;
  border-color: #667eea;
}

.setting-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Color Picker */
.color-picker-group {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.color-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.color-input-wrapper {
  display: flex;
  gap: 0.5rem;
}

.color-picker {
  width: 50px;
  height: 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-text {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Courier New', monospace;
  transition: all 0.2s;
}

.color-text:focus {
  outline: none;
  border-color: #667eea;
}

/* Primary Button */
.btn-primary {
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary Button */
.btn-secondary {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  color: #2c3e50;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #e9ecef;
  border-color: #667eea;
  color: #667eea;
}

/* Messages */
.success-message {
  margin-top: 1rem;
  padding: 0.875rem 1.25rem;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  color: #155724;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.error-message {
  margin-top: 1rem;
  padding: 0.875rem 1.25rem;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  color: #721c24;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

/* Preview Panel */
.preview-panel {
  flex: 1;
  min-width: 400px;
}

.preview-panel h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c3e50;
}

.preview-container {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

.preview-canvas {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: white;
}

.preview-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.preview-badge {
  font-size: 0.85rem;
  font-weight: 600;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 0.375rem 0.875rem;
  border-radius: 12px;
}

.preview-badge.quality {
  color: #764ba2;
  background: rgba(118, 75, 162, 0.1);
}

.preview-hint {
  margin: 1rem 0 0 0;
  font-size: 0.9rem;
  color: #6c757d;
  line-height: 1.5;
  text-align: center;
}

/* Share Options */
.share-options {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.share-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
  min-height: 300px;
}

.placeholder-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.share-placeholder p {
  font-size: 1rem;
  color: #6c757d;
  line-height: 1.6;
  max-width: 400px;
}

/* Share Link Box */
.share-link-box {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  border: 2px solid #e9ecef;
}

.share-link-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.share-link-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.share-expiry {
  font-size: 0.85rem;
  color: #6c757d;
  background: white;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
}

.share-link-input-group {
  display: flex;
  gap: 0.75rem;
}

.share-link-input {
  flex: 1;
  padding: 0.875rem 1rem;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #2c3e50;
  font-family: 'Courier New', monospace;
}

.share-link-input:focus {
  outline: none;
  border-color: #667eea;
}

.btn-copy {
  padding: 0.875rem 1.5rem;
  background: white;
  border: 2px solid #667eea;
  border-radius: 8px;
  color: #667eea;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-copy:hover {
  background: #667eea;
  color: white;
}

/* QR Code Section */
.qr-code-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.qr-code-container svg {
  border-radius: 8px;
}

.qr-hint {
  margin: 1rem 0 0 0;
  font-size: 0.9rem;
  color: #6c757d;
  text-align: center;
}

/* Social Share Section */
.social-share-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: #2c3e50;
}

.social-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.social-btn.whatsapp {
  background: #25D366;
  color: white;
}

.social-btn.whatsapp:hover {
  background: #20BA5A;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.social-btn.email {
  background: #EA4335;
  color: white;
}

.social-btn.email:hover {
  background: #D93025;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(234, 67, 53, 0.3);
}

.social-btn.telegram {
  background: #0088cc;
  color: white;
}

.social-btn.telegram:hover {
  background: #0077b5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
}

.social-btn.facebook {
  background: #1877F2;
  color: white;
}

.social-btn.facebook:hover {
  background: #0C66D8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

.social-btn.twitter {
  background: #1DA1F2;
  color: white;
}

.social-btn.twitter:hover {
  background: #0C8FDB;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3);
}

/* Material Selection */
.material-hint {
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

.material-preview-note {
  padding: 0.75rem 1rem;
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 8px;
  color: #856404;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.material-option {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #e9ecef;
  transition: all 0.2s;
  background: white;
}

.material-option:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.material-option.selected {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.material-preview {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.material-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

.material-checkmark {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #667eea;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.material-warning {
  padding: 0.75rem 1rem;
  background: #f8d7da;
  border: 2px solid #f5c6cb;
  border-radius: 8px;
  color: #721c24;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* Toggle Switch (moderner Ersatz für Checkboxen) */
.toggle-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.toggle-switch-wrapper:hover {
  background: #e9ecef;
  border-color: #667eea;
}

.toggle-switch-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-right: 1rem;
}

.toggle-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
}

.toggle-hint {
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.4;
}

/* Toggle Switch Control */
.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e0;
  transition: all 0.3s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: all 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.toggle-switch-wrapper.active .toggle-label {
  color: #667eea;
}

/* Collapsible Section */
.collapsible-section {
  margin-bottom: 1rem;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  transition: all 0.2s;
}

.collapsible-section:hover {
  border-color: #667eea;
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  background: #f8f9fa;
  transition: all 0.2s;
  user-select: none;
}

.collapsible-header:hover {
  background: #e9ecef;
}

.collapsible-header.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.collapsible-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #2c3e50;
}

.collapsible-title-icon {
  font-size: 1.25rem;
}

.collapsible-arrow {
  font-size: 1.25rem;
  color: #6c757d;
  transition: transform 0.3s;
}

.collapsible-arrow.open {
  transform: rotate(180deg);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.collapsible-content.open {
  max-height: 2000px;
  padding: 1.25rem;
}

.collapsible-content-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .unified-content {
    flex-direction: column;
  }

  .settings-panel,
  .preview-panel {
    min-width: auto;
    max-width: none;
  }

  .unified-dialog {
    width: 95vw;
    max-height: 95vh;
  }

  .mode-toggle {
    flex-direction: column;
    padding: 0.5rem;
  }

  .mode-btn {
    width: 100%;
  }

  .social-buttons {
    grid-template-columns: 1fr;
  }

  .material-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================
   NEUE STYLES FÜR VERBESSERUNGEN
   ========================================== */

/* Material-Hint: Bessere Lesbarkeit */
.material-hint {
  font-size: 0.9rem !important;
  color: #2c3e50 !important;
  font-weight: 500;
  background: #f8f9fa;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

/* Material Preview Switcher */
.material-preview-switcher {
  margin: 1rem 0;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid #e9ecef;
}

.switcher-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.material-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.material-tab {
  padding: 0.625rem 1rem;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  color: #6c757d;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.material-tab:hover {
  background: #f8f9fa;
  border-color: #667eea;
  color: #667eea;
}

.material-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Material Preview Info (Share Mode) */
.material-preview-info {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #667eea;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
}

/* Share Info Box */
.share-info-box {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  border-radius: 12px;
  border: 2px solid #bbdefb;
  margin-bottom: 1rem;
}

.share-info-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.share-info-content {
  flex: 1;
}

.share-info-content strong {
  display: block;
  font-size: 0.9rem;
  color: #1976d2;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.share-info-content p {
  margin: 0;
  font-size: 0.85rem;
  color: #424242;
  line-height: 1.5;
}

/* Verbesserter Copy-Button */
.btn-copy {
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-copy:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-copy:active {
  transform: translateY(0);
}

/* Optimierte Pop-Up Spacing */
.unified-dialog-overlay {
  padding: 2rem 1.5rem !important;
}

.unified-dialog {
  max-height: 88vh !important;
}

@media (max-height: 700px) {
  .unified-dialog-overlay {
    padding: 1rem !important;
  }

  .unified-dialog {
    max-height: 95vh !important;
  }
}
/* Design Library Styles - Premium Edition */

.design-library {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Header */
.library-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 3rem;
}

/* Title Section - Clean and Prominent */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--app-border, #e0e0e0);
  width: 100%;
}

.header-top h2 {
  margin: 0;
  font-size: 2.5rem;
  color: var(--app-text-primary, #2c3e50);
  font-weight: 700;
  line-height: 1.2;
}

.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.btn-import {
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-import:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5568d3 0%, #6b3fa3 100%);
}

.btn-create-new {
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-create-new:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
  background: linear-gradient(135deg, #45a049 0%, #388e3c 100%);
}

/* Modern Search Section - Full Width, Not Centered */
.search-section {
  margin-bottom: 2rem;
  display: block;
  width: 100%;
  clear: both;
}

.search-box-modern {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: block;
}

.search-icon-modern {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--app-text-secondary, #666);
  pointer-events: none;
  z-index: 1;
}

.search-input-modern {
  width: 100%;
  padding: 1rem 3rem 1rem 3.5rem;
  border: 2px solid var(--app-border-medium, #e0e0e0);
  border-radius: 50px;
  font-size: 1rem;
  background: var(--app-card-bg, white);
  color: var(--app-text-primary, #2c3e50);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-input-modern:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
}

.btn-clear-search-modern {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 1.3rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}

.btn-clear-search-modern:hover {
  color: #666;
}

/* Controls - Simplified and Clean */
.library-controls-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 1.75rem;
  background: var(--app-hover-bg, #f8f9fa);
  border-radius: 10px;
  margin-bottom: 2.5rem;
  border: 1px solid var(--app-border, #e0e0e0);
  width: 100%;
  clear: both;
}

.stats-summary {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.stat-item {
  font-size: 1rem;
  color: var(--app-text-secondary, #666);
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-weight: 500;
}

.stat-item strong {
  color: var(--app-text-primary, #2c3e50);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

.stat-item.search-result {
  color: #667eea;
  font-weight: 500;
}

.filter-group-modern {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.sort-box-modern {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--app-card-bg, white);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--app-border, #e0e0e0);
}

.sort-label {
  font-size: 0.9rem;
  color: var(--app-text-secondary, #666);
  font-weight: 500;
}

.sort-select-modern {
  padding: 0.4rem 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--app-text-primary, #2c3e50);
  cursor: pointer;
  font-weight: 500;
  outline: none;
}

.sort-select-modern option {
  background: var(--app-card-bg, white);
  color: var(--app-text-primary, #2c3e50);
}

.view-mode-toggle {
  display: flex;
  gap: 0.5rem;
  border: none;
  border-radius: 8px;
  padding: 0.25rem;
  background: var(--app-card-bg, white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.view-btn {
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.view-btn:hover {
  background: var(--app-hover-bg, #f5f5f5);
}

.view-btn.active {
  background: #667eea;
  color: white;
}

/* Alerts */
.alert {
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 5rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.empty-icon {
  font-size: 5rem;
  margin-bottom: 1.5rem;
  color: #9ca3af;
  opacity: 0.6;
}

.empty-state h3 {
  font-size: 1.8rem;
  color: var(--app-text-primary, #2c3e50);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.empty-state p {
  color: var(--app-text-secondary, #666666);
  font-size: 1.15rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  font-weight: 500;
}

.btn-large {
  padding: 1.2rem 2.5rem;
  font-size: 1.15rem;
  margin: 0 auto;
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25), 0 2px 8px rgba(102, 126, 234, 0.15);
  position: relative;
  overflow: hidden;
}

.btn-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-large:hover::before {
  left: 100%;
}

.btn-large:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35), 0 4px 12px rgba(102, 126, 234, 0.2);
  background: linear-gradient(135deg, #5568d3 0%, #6b3fa3 100%);
}

.btn-large:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.empty-tips {
  margin-top: 3rem;
  text-align: left;
  background: var(--app-hover-bg, #f8f9fa);
  padding: 2.5rem;
  border-radius: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.empty-tips h4 {
  margin-top: 0;
  color: var(--app-text-primary, #2c3e50);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.empty-tips ul {
  list-style: none;
  padding: 0;
}

.empty-tips li {
  padding: 0.6rem 0;
  color: var(--app-text-secondary, #666);
  line-height: 1.5;
}

.empty-tips li::before {
  content: "✓ ";
  color: #667eea;
  font-weight: bold;
  margin-right: 0.5rem;
}

/* No Results */
.no-results {
  text-align: center;
  padding: 3rem;
  color: var(--app-text-secondary, #666);
}

/* Dark Mode Support */
.dark-mode .header-top {
  border-bottom-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .library-header h2 {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .library-controls-modern {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.6) 0%, rgba(22, 33, 62, 0.6) 100%);
  border: 1px solid rgba(129, 140, 248, 0.15);
}

.dark-mode .stat-item {
  color: rgba(129, 140, 248, 0.7);
}

.dark-mode .stat-item strong {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .sort-box-modern {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(129, 140, 248, 0.2);
}

.dark-mode .sort-label {
  color: rgba(129, 140, 248, 0.8);
}

.dark-mode .sort-select-modern {
  color: var(--app-text-primary, #2c3e50);
}

.dark-mode .sort-select-modern option {
  background: var(--app-card-bg, white);
  color: var(--app-text-primary, #2c3e50);
}

.dark-mode .design-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(129, 140, 248, 0.2);
}

.dark-mode .design-card:hover {
  box-shadow: 0 8px 24px rgba(129, 140, 248, 0.3);
  border-color: rgba(129, 140, 248, 0.4);
}

.dark-mode .empty-tips {
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .empty-tips h4 {
  color: #e0e0e0;
}

.dark-mode .empty-tips li {
  color: #b0b0b0;
}

.dark-mode .empty-tips li::before {
  color: #8b9eea;
}

.dark-mode .empty-state h3 {
  color: #ffffff;
}

.dark-mode .empty-state p {
  color: rgba(129, 140, 248, 0.85);
}

.dark-mode .empty-state {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
  border: 2px solid rgba(129, 140, 248, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Design Grid */
.designs-container {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.designs-container.grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.designs-container.list {
  grid-template-columns: 1fr;
}

/* Design Card */
.design-card {
  background: var(--app-card-bg, white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--app-border-medium, #e0e0e0);
}

.design-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

/* Thumbnail with hover overlay */
.design-thumbnail {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.design-thumbnail.clickable {
  cursor: pointer;
}

.design-thumbnail img,
.design-thumbnail .design-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover overlay for clickable thumbnail */
.thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(102, 126, 234, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  gap: 0.5rem;
}

.design-thumbnail.clickable:hover .thumbnail-overlay {
  opacity: 1;
}

.overlay-icon {
  font-size: 2rem;
}

.overlay-text {
  color: white;
  font-weight: 600;
  font-size: 1rem;
}

/* Design content area */
.design-content {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 180px; /* ✅ FIX: Konsistente Höhe für Button-Alignment */
}

.design-name {
  margin: 0;
  font-size: 1.1rem;
  color: #111827;
  font-weight: 600;
  line-height: 1.3;
  /* ✅ FIX: Ellipsis für lange Namen */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.design-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Horizontal layout for element icons - more compact */
.design-meta-horizontal {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin: 0.75rem 0;
}

.meta-item {
  font-size: 0.85rem;
  color: var(--app-text-secondary, #666);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--app-hover-bg, #f8f9fa);
  border-radius: 6px;
  white-space: nowrap;
}

.design-date {
  font-size: 0.75rem;
  color: var(--app-text-tertiary, #999);
}

/* Actions row - cleaner layout */
.design-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--app-border, #eee);
}

.btn-apply-product {
  flex: 1;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-apply-product:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Elegant Dropdown Menu */
.dropdown-container {
  position: relative;
}

.btn-more-actions {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-hover-bg, #f5f5f5);
  border: 1px solid var(--app-border, #e0e0e0);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-more-actions:hover {
  background: #e8e8e8;
  border-color: #ccc;
}

.btn-more-actions .dots {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--app-text-secondary, #666);
  letter-spacing: 1px;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 200px;
  background: var(--app-card-bg, white);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--app-border, #e0e0e0);
  z-index: 100;
  animation: dropdownFadeIn 0.15s ease-out;
  overflow: hidden;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1.25rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--app-text-primary, #2c3e50);
  transition: all 0.15s ease;
}

.dropdown-item:hover {
  background: var(--app-hover-bg, #f5f5f5);
}

.dropdown-item-danger {
  color: #e74c3c;
}

.dropdown-item-danger:hover {
  background: #fff5f5;
}

.dropdown-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.dropdown-text {
  font-weight: 500;
}

.dropdown-divider {
  height: 1px;
  background: var(--app-border, #e0e0e0);
  margin: 0.25rem 0;
}

/* Legacy - kept for backwards compatibility */
.secondary-actions {
  display: flex;
  gap: 0.25rem;
}

.btn-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-hover-bg, #f5f5f5);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #e0e0e0;
  transform: scale(1.05);
}

.btn-icon.btn-delete:hover {
  background: #ffebee;
}

/* Legacy classes for backwards compatibility */
.design-info {
  padding: 1.25rem;
  flex: 1;
}

.design-actions {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--app-border, #f0f0f0);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn-action {
  flex: 1;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.btn-edit {
  background: #f0f4ff;
  color: #667eea;
}

.btn-edit:hover {
  background: #667eea;
  color: white;
}

.btn-apply {
  background: #e8f5e9;
  color: #4caf50;
}

.btn-apply:hover {
  background: #4caf50;
  color: white;
}

.more-actions {
  position: relative;
}

.btn-more {
  padding: 0.6rem 0.75rem;
  background: var(--app-hover-bg, #f5f5f5);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--app-text-secondary, #666);
}

.btn-more:hover {
  background: var(--app-border-medium, #e0e0e0);
}

.more-menu {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 0.5rem;
  background: var(--app-card-bg, white);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--app-card-shadow, rgba(0, 0, 0, 0.15));
  border: 1px solid var(--app-border, #f0f0f0);
  min-width: 150px;
  z-index: 100;
  animation: fadeIn 0.15s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.more-menu button {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--app-text-primary, #2c3e50);
}

.more-menu button:hover {
  background: var(--app-hover-bg, #f5f5f5);
}

.more-menu button.delete-action {
  color: #e74c3c;
}

.more-menu button.delete-action:hover {
  background: #ffebee;
}

/* Load More */
.load-more-section {
  text-align: center;
  padding: 2rem;
}

.load-more-info {
  color: var(--app-text-secondary, #666);
  margin-bottom: 1rem;
}

.btn-load-more {
  padding: 0.75rem 2rem;
  background: var(--app-card-bg, white);
  border: 2px solid #667eea;
  color: #667eea;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-load-more:hover {
  background: #667eea;
  color: white;
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Tablet & Medium Screens (max 1024px) */
@media (max-width: 1024px) {
  .design-library {
    padding: 1.5rem;
  }

  .header-top h2 {
    font-size: 2.25rem;
  }

  .library-controls-modern {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .filter-group-modern {
    width: 100%;
    justify-content: flex-start;
  }

  .designs-container.grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .btn-action-modern {
    min-width: 120px;
    padding: 0.6rem 1.1rem;
    font-size: 0.95rem;
  }
}

/* Mobile & Small Tablets (max 768px) */
@media (max-width: 768px) {
  .design-library {
    padding: 1rem;
  }

  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding-bottom: 1rem;
  }

  .header-top h2 {
    font-size: 1.75rem;
    text-align: center;
    width: 100%;
  }

  .header-subtitle {
    font-size: 0.95rem;
    text-align: center;
  }

  .header-actions {
    width: 100%;
    flex-direction: column;
    gap: 0.75rem;
  }

  .header-actions button {
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
  }

  .library-controls-modern {
    padding: 1rem;
  }

  .stats-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
  }

  .stat-item {
    font-size: 0.9rem;
  }

  .filter-group-modern {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .sort-box-modern,
  .view-mode-toggle {
    width: 100%;
  }

  .sort-box-modern {
    justify-content: space-between;
    padding: 0.75rem 1rem;
  }

  .sort-select-modern {
    font-size: 16px; /* Prevents iOS zoom */
  }

  .view-mode-toggle {
    justify-content: center;
  }

  .designs-container.grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .design-card {
    padding: 1.25rem;
  }

  .design-header h3 {
    font-size: 1.15rem;
  }

  .design-meta {
    font-size: 0.85rem;
  }

  .design-thumbnail {
    height: 200px;
  }

  .design-stats {
    font-size: 0.85rem;
  }

  .design-actions-modern {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
  }

  .action-buttons-primary {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }

  .btn-action-modern {
    width: 100%;
    justify-content: center;
    min-width: unset;
  }

  .btn-more {
    width: 100%;
  }

  .dropdown-menu-modern {
    width: 100%;
    left: 0;
    right: 0;
  }

  .empty-state {
    padding: 3rem 1.5rem;
  }

  .empty-state h3 {
    font-size: 1.5rem;
  }

  .empty-state p {
    font-size: 0.95rem;
  }
}

/* Small Mobile Screens (max 480px) */
@media (max-width: 480px) {
  .design-library {
    padding: 0.75rem;
  }

  .header-top {
    gap: 1rem;
  }

  .header-top h2 {
    font-size: 1.5rem;
  }

  .header-subtitle {
    font-size: 0.85rem;
  }

  .header-actions {
    gap: 0.65rem;
  }

  .header-actions button {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  .library-controls-modern {
    padding: 0.85rem;
  }

  .stats-summary {
    gap: 0.5rem;
  }

  .stat-item {
    font-size: 0.85rem;
  }

  .filter-group-modern {
    gap: 0.65rem;
  }

  .sort-box-modern {
    padding: 0.65rem 0.85rem;
  }

  .sort-label-modern {
    font-size: 0.85rem;
  }

  .sort-select-modern {
    font-size: 14px;
    padding: 0.5rem;
  }

  .view-mode-toggle {
    padding: 0.5rem;
    gap: 0.4rem;
  }

  .view-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .designs-container.grid {
    gap: 0.75rem;
  }

  .design-card {
    padding: 1rem;
  }

  .design-header {
    gap: 0.5rem;
  }

  .design-header h3 {
    font-size: 1.05rem;
  }

  .design-meta {
    font-size: 0.8rem;
  }

  .design-thumbnail {
    height: 180px;
  }

  .design-stats {
    font-size: 0.8rem;
    gap: 0.75rem;
  }

  .stat-value {
    font-size: 1rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .design-actions-modern {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    gap: 0.4rem;
  }

  .action-buttons-primary {
    gap: 0.4rem;
  }

  .btn-action-modern {
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
  }

  .btn-more {
    padding: 0.65rem;
  }

  .dropdown-menu-modern {
    font-size: 0.9rem;
  }

  .dropdown-item-modern {
    padding: 0.65rem 0.85rem;
  }

  .empty-state {
    padding: 2.5rem 1rem;
  }

  .empty-state h3 {
    font-size: 1.35rem;
  }

  .empty-state p {
    font-size: 0.9rem;
  }
}

/* Landscape Mobile (height < 600px) */
@media (max-height: 600px) and (orientation: landscape) {
  .design-library {
    padding: 0.75rem 1.25rem;
  }

  .header-top {
    padding-bottom: 0.75rem;
  }

  .header-top h2 {
    font-size: 1.5rem;
  }

  .library-controls-modern {
    padding: 0.85rem;
  }

  .designs-container.grid {
    gap: 0.75rem;
  }

  .design-card {
    padding: 0.85rem;
  }

  .design-thumbnail {
    height: 140px;
  }

  .design-actions-modern {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
  }

  .empty-state {
    padding: 2rem 1.25rem;
  }
}

/* Touch-Friendly Elements */
@media (hover: none) and (pointer: coarse) {
  .header-actions button {
    min-height: 48px;
  }

  .btn-action-modern {
    min-height: 44px;
  }

  .btn-more {
    min-width: 44px;
    min-height: 44px;
  }

  .sort-select-modern {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .view-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .dropdown-item-modern {
    min-height: 44px;
  }

  .design-card {
    min-height: 280px;
  }

  /* Smooth scrolling */
  .design-library,
  .designs-container {
    -webkit-overflow-scrolling: touch;
  }

  /* Remove hover effects on touch */
  .design-card:hover {
    transform: none;
  }

  .btn-action-modern:hover,
  .btn-more:hover,
  .view-btn:hover {
    transform: none;
  }

  .dropdown-item-modern:hover {
    transform: none;
  }

  /* Add active states for feedback */
  .design-card:active {
    transform: scale(0.98);
    opacity: 0.95;
  }

  .btn-action-modern:active,
  .btn-more:active {
    opacity: 0.9;
    transform: scale(0.98);
  }

  .view-btn:active:not(.active) {
    background: rgba(102, 126, 234, 0.15);
  }

  .dropdown-item-modern:active {
    background: rgba(102, 126, 234, 0.15);
  }
}

/* High-DPI Screens (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .design-card {
    border-width: 1.5px;
  }

  .design-thumbnail img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  .sort-box-modern {
    border-width: 1.5px;
  }

  .view-btn {
    border-width: 1.5px;
  }
}

/* Large Screens - Optimize Grid */
@media (min-width: 1400px) {
  .designs-container.grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* ==================== MODERNE ACTION BUTTONS ==================== */

.design-actions-modern {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.action-buttons-primary {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-action-modern {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: white;
  color: #2c3e50;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.btn-action-modern svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn-action-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-action-modern:active {
  transform: translateY(0);
}

/* Spezifische Button-Styles */
.btn-edit {
  border-color: #667eea;
  color: #667eea;
}

.btn-edit:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
}

.btn-share {
  border-color: #f093fb;
  color: #c471ed;
}

.btn-share:hover {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  border-color: transparent;
}

.btn-export-share {
  border-color: #a8e063;
  color: #56ab2f;
}

.btn-export-share:hover {
  background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%);
  color: white;
  border-color: transparent;
}

.btn-action-modern.btn-apply {
  border-color: #4facfe;
  color: #00a8ff;
}

.btn-action-modern.btn-apply:hover {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border-color: transparent;
}

.btn-export {
  border-color: #a8e063;
  color: #56ab2f;
}

.btn-export:hover {
  background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%);
  color: white;
  border-color: transparent;
}

.btn-more {
  padding: 0.6rem;
  border-color: rgba(0, 0, 0, 0.12);
  color: #666;
}

.btn-more:hover {
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.2);
}

/* Dropdown Menu Modern */
.dropdown-menu-modern {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  min-width: 180px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 0.5rem;
  animation: dropdownFadeIn 0.2s ease;
}

.dropdown-item-modern {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  color: #2c3e50;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.dropdown-item-modern svg {
  flex-shrink: 0;
}

.dropdown-item-modern:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.dropdown-item-danger:hover {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.dropdown-divider-modern {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 0.5rem 0;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark Mode */
.dark-mode .design-actions-modern {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .btn-action-modern {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

.dark-mode .btn-action-modern:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .dropdown-menu-modern {
  background: #1a1a2e;
  border-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .dropdown-item-modern {
  color: #e0e0e0;
}

.dark-mode .dropdown-item-modern:hover {
  background: rgba(129, 140, 248, 0.1);
  color: #d4af76;
}

.dark-mode .dropdown-divider-modern {
  background: rgba(255, 255, 255, 0.1);
}

/* ==================== BUTTON SIZE & DROPDOWN FIX ==================== */

/* Einheitliche Button-Größen */
.btn-action-modern {
  min-width: 140px;
  flex: 1;
  justify-content: center;
  padding: 0.65rem 1.25rem;
}

.btn-more {
  min-width: auto;
  flex: 0 0 auto;
  width: 40px;
  padding: 0.65rem;
}

/* Dropdown nicht abgeschnitten */
.dropdown-container {
  position: relative;
}

.dropdown-menu-modern {
  z-index: 1000 !important;
  position: absolute !important;
}

.design-card {
  overflow: visible !important;
}

.design-content {
  overflow: visible !important;
}
/**
 * Export Dialog Styles
 */

.export-dialog {
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
}

.export-option {
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.export-option:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.export-option-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.export-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.export-option-header h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.3rem;
  color: #2c3e50;
}

.export-option-header p {
  margin: 0;
  font-size: 0.95rem;
  color: #666;
}

.export-option-details {
  margin-bottom: 1.25rem;
  padding-left: 3.5rem;
}

.export-option-details h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #667eea;
  font-weight: 600;
}

.export-option-details ul {
  margin: 0 0 1rem 0;
  padding-left: 1.25rem;
  list-style: none;
}

.export-option-details ul li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #2c3e50;
  position: relative;
  padding-left: 1rem;
}

.export-option-details ul li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

.export-option-details ul li strong {
  color: #2c3e50;
  font-weight: 600;
}

.info-box {
  background: #e8f4fd;
  border-left: 4px solid #2196F3;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-top: 1rem;
}

.info-box p {
  margin: 0;
  font-size: 0.9rem;
  color: #0d47a1;
  line-height: 1.5;
}

.export-btn {
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.export-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary.export-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary.export-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary.export-btn {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary.export-btn:hover:not(:disabled) {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

/* Alert Messages */
.alert {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Tablet & Medium Screens (max 1024px) */
@media (max-width: 1024px) {
  .export-dialog {
    max-width: 90%;
  }

  .export-option {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .export-option-header h3 {
    font-size: 1.2rem;
  }

  .export-icon {
    font-size: 2.25rem;
  }
}

/* Mobile & Small Tablets (max 768px) */
@media (max-width: 768px) {
  .export-dialog {
    max-width: 95%;
    max-height: 95vh;
    margin: 1rem;
  }

  .export-option {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .export-option-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
  }

  .export-option-details {
    padding-left: 0;
  }

  .export-icon {
    font-size: 2rem;
  }

  .export-option-header h3 {
    font-size: 1.15rem;
  }

  .export-option-header p {
    font-size: 0.9rem;
  }

  .export-option-details ul li {
    font-size: 0.85rem;
  }

  .info-box {
    padding: 0.65rem 0.85rem;
  }

  .info-box p {
    font-size: 0.85rem;
  }

  .export-btn {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }

  .alert {
    padding: 0.85rem;
    font-size: 0.9rem;
  }
}

/* Small Mobile Screens (max 480px) */
@media (max-width: 480px) {
  .export-dialog {
    max-width: 100%;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .export-option {
    padding: 0.85rem;
    margin-bottom: 0.85rem;
    border-radius: 8px;
  }

  .export-icon {
    font-size: 1.75rem;
  }

  .export-option-header h3 {
    font-size: 1.1rem;
  }

  .export-option-header p {
    font-size: 0.85rem;
  }

  .export-option-details h4 {
    font-size: 0.95rem;
  }

  .export-option-details ul {
    padding-left: 1rem;
  }

  .export-option-details ul li {
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
    padding-left: 0.85rem;
  }

  .info-box {
    padding: 0.6rem 0.75rem;
  }

  .info-box p {
    font-size: 0.8rem;
  }

  .export-btn {
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
  }

  .alert {
    padding: 0.75rem;
    font-size: 0.85rem;
  }
}

/* Landscape Mobile (height < 600px) */
@media (max-height: 600px) and (orientation: landscape) {
  .export-dialog {
    max-height: 95vh;
    overflow-y: auto;
  }

  .export-option {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .export-option-header {
    margin-bottom: 0.5rem;
  }

  .export-option-details {
    margin-bottom: 0.75rem;
  }

  .export-option-details ul {
    margin-bottom: 0.5rem;
  }

  .export-option-details ul li {
    margin-bottom: 0.25rem;
  }

  .info-box {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .alert {
    padding: 0.65rem;
    margin-bottom: 0.75rem;
  }
}

/* Touch-Friendly Elements */
@media (hover: none) and (pointer: coarse) {
  .export-btn {
    min-height: 48px;
    padding: 1rem 1.5rem;
  }

  .export-option {
    /* Larger tap area */
    padding: 1.5rem;
  }

  .export-option-header {
    /* More spacing for easier tapping */
    gap: 1.25rem;
  }

  /* Smooth scrolling on touch devices */
  .export-dialog {
    -webkit-overflow-scrolling: touch;
  }

  /* Larger info boxes for readability */
  .info-box {
    padding: 1rem 1.25rem;
  }

  /* Remove hover effects on touch */
  .export-option:hover {
    transform: none;
  }

  .export-btn:hover:not(:disabled) {
    transform: none;
  }

  /* But add active state for feedback */
  .export-option:active {
    background: #f0f1f3;
    border-color: #667eea;
  }

  .export-btn:active:not(:disabled) {
    opacity: 0.9;
  }
}

/* High-DPI Screens (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .export-option {
    border-width: 1.5px;
  }

  .btn-secondary.export-btn {
    border-width: 1.5px;
  }

  .alert {
    border-width: 0.75px;
  }

  .info-box {
    border-left-width: 3px;
  }
}

/* Dark Mode Support (if implemented) */
@media (prefers-color-scheme: dark) {
  .export-option {
    background: #2a2a2a;
    border-color: #444;
  }

  .export-option:hover {
    border-color: #667eea;
    background: #333;
  }

  .export-option-header h3 {
    color: #e0e0e0;
  }

  .export-option-header p {
    color: #b0b0b0;
  }

  .export-option-details ul li {
    color: #d0d0d0;
  }

  .export-option-details ul li strong {
    color: #e0e0e0;
  }

  .info-box {
    background: #1a3a52;
    border-left-color: #42a5f5;
  }

  .info-box p {
    color: #90caf9;
  }

  .alert-success {
    background: #1b5e20;
    color: #a5d6a7;
    border-color: #2e7d32;
  }

  .alert-error {
    background: #7f0000;
    color: #ef9a9a;
    border-color: #c62828;
  }
}
/* Confirm Modal */
.confirm-modal {
  max-width: 450px;
  width: 90%;
}

.confirm-modal .modal-body {
  padding: 1.5rem;
}

.confirm-message {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--app-text-primary, #2c3e50);
  margin: 0;
}

.confirm-modal .modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--app-border-light, #e5e7eb);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.btn-danger {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.btn-danger:active {
  transform: translateY(0);
}

/* Dark Mode Support */
.dark-mode .confirm-message {
  color: rgba(129, 140, 248, 0.9);
}

.dark-mode .confirm-modal .modal-footer {
  border-top-color: rgba(129, 140, 248, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

/* Button Styling für Dark Mode */
.dark-mode .btn-secondary {
  background: rgba(129, 140, 248, 0.1);
  color: rgba(129, 140, 248, 0.9);
  border: 2px solid rgba(129, 140, 248, 0.3);
}

.dark-mode .btn-secondary:hover {
  background: rgba(129, 140, 248, 0.2);
  color: var(--app-accent, #818cf8);
  border-color: rgba(129, 140, 248, 0.5);
}

.dark-mode .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.dark-mode .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
/* Input Modal */
.input-modal {
  max-width: 500px;
  width: 90%;
}

.input-modal .modal-body {
  padding: 1.5rem;
}

.input-message {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--app-text-secondary, #6b7280);
  margin: 0 0 1rem 0;
}

.input-field {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--app-border-medium, #d1d5db);
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: var(--app-bg-primary, #ffffff);
  color: var(--app-text-primary, #2c3e50);
}

.input-field:focus {
  outline: none;
  border-color: var(--app-accent-primary, #667eea);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-field::placeholder {
  color: var(--app-text-disabled, #9ca3af);
}

.input-modal .modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--app-border-light, #e5e7eb);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.input-modal .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/**
 * Template Editor Styling
 */

.template-editor-modal {
  max-width: 1000px;
  max-height: 90vh;
  width: 95vw;
}

.template-editor-body {
  max-height: calc(90vh - 180px);
  overflow-y: auto;
}

/* Editor Sections */
.editor-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--app-border, #e0e0e0);
}

.editor-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.editor-section h3 {
  font-size: 1.2rem;
  color: var(--app-text-primary, #1a202c);
  margin: 0 0 1rem 0;
  font-weight: 600;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-header h3 {
  margin: 0;
}

/* Form Groups */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: var(--app-text-primary, #1a202c);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.form-group small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--app-text-secondary, #666);
  font-style: italic;
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--app-text-primary, #1a202c);
  background: var(--app-card-bg, white);
  transition: all 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--app-accent, #667eea);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Add Field Button */
.btn-add-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-field:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Fields Empty State */
.fields-empty-state {
  padding: 2rem;
  text-align: center;
  background: var(--app-hover-bg, #f8f9fa);
  border-radius: 10px;
  border: 2px dashed var(--app-border, #e0e0e0);
}

.fields-empty-state p {
  margin: 0.5rem 0;
  color: var(--app-text-secondary, #666);
}

.fields-empty-state .hint {
  font-size: 0.9rem;
  color: var(--app-text-tertiary, #999);
  font-style: italic;
}

/* Fields List */
.fields-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field-item {
  background: var(--app-card-bg, white);
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 10px;
  padding: 1rem;
  transition: all 0.2s;
}

.field-item.editing {
  border-color: var(--app-accent, #667eea);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
}

.field-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.field-item-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
}

.field-number {
  font-weight: 700;
  color: var(--app-text-tertiary, #999);
  font-size: 0.85rem;
}

.field-item-info strong {
  font-weight: 600;
  color: var(--app-text-primary, #1a202c);
  font-size: 1rem;
}

.required-badge,
.target-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.required-badge {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.target-badge {
  background: var(--app-accent-light, #e0e7ff);
  color: var(--app-accent, #667eea);
  border: 1px solid var(--app-accent, #667eea);
}

/* Field Actions */
.field-item-actions {
  display: flex;
  gap: 0.25rem;
}

.btn-field-action {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: var(--app-hover-bg, #f8f9fa);
  color: var(--app-text-primary, #1a202c);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.btn-field-action:hover:not(:disabled) {
  background: var(--app-accent-light, #e0e7ff);
  color: var(--app-accent, #667eea);
  transform: translateY(-2px);
}

.btn-field-action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-field-action.btn-delete:hover {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

/* Field Editor */
.field-editor {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--app-border, #e0e0e0);
}

.field-editor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .field-editor-row {
    grid-template-columns: 1fr;
  }
}

/* Dark Mode */
.dark-mode .template-editor-modal {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%);
  border-color: rgba(129, 140, 248, 0.3);
}

.dark-mode .editor-section {
  border-bottom-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .editor-section h3 {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .form-group label {
  color: rgba(129, 140, 248, 0.9);
}

.dark-mode .form-group small {
  color: rgba(129, 140, 248, 0.6);
}

.dark-mode .form-input {
  background: rgba(129, 140, 248, 0.08);
  border-color: rgba(129, 140, 248, 0.3);
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .form-input:focus {
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.dark-mode .form-input::placeholder {
  color: rgba(129, 140, 248, 0.5);
}

.dark-mode .btn-add-field {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.25) 0%, rgba(129, 140, 248, 0.15) 100%);
  color: var(--app-accent, #818cf8);
  border: 2px solid rgba(129, 140, 248, 0.4);
}

.dark-mode .btn-add-field:hover {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.35) 0%, rgba(129, 140, 248, 0.25) 100%);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}

.dark-mode .fields-empty-state {
  background: rgba(129, 140, 248, 0.05);
  border-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .fields-empty-state p {
  color: rgba(129, 140, 248, 0.7);
}

.dark-mode .fields-empty-state .hint {
  color: rgba(129, 140, 248, 0.6);
}

.dark-mode .field-item {
  background: rgba(129, 140, 248, 0.05);
  border-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .field-item.editing {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 4px 16px rgba(129, 140, 248, 0.2);
}

.dark-mode .field-number {
  color: rgba(129, 140, 248, 0.6);
}

.dark-mode .field-item-info strong {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .target-badge {
  background: rgba(129, 140, 248, 0.15);
  color: var(--app-accent, #818cf8);
  border-color: rgba(129, 140, 248, 0.4);
}

.dark-mode .btn-field-action {
  background: rgba(129, 140, 248, 0.1);
  color: rgba(129, 140, 248, 0.9);
}

.dark-mode .btn-field-action:hover:not(:disabled) {
  background: rgba(129, 140, 248, 0.2);
  color: var(--app-accent, #818cf8);
}

.dark-mode .field-editor {
  border-top-color: rgba(129, 140, 248, 0.2);
}
/**
 * Template Management Modal Styling
 */

.template-management-modal {
  max-width: 900px;
  max-height: 85vh;
}

.template-test-modal {
  max-width: 700px;
  max-height: 85vh;
}

.modal-subtitle {
  color: var(--app-text-secondary, #666);
  font-size: 0.9rem;
  font-weight: 400;
  margin-top: 0.25rem;
}

/* Create Section */
.template-create-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--app-border, #e0e0e0);
}

.btn-create-template {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-create-template:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Empty State */
.templates-empty-state {
  padding: 3rem 2rem;
  text-align: center;
  background: var(--app-hover-bg, #f8f9fa);
  border-radius: 12px;
  border: 2px dashed var(--app-border, #e0e0e0);
}

.templates-empty-state .empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.templates-empty-state h3 {
  font-size: 1.25rem;
  color: var(--app-text-primary, #1a202c);
  margin-bottom: 0.5rem;
}

.templates-empty-state p {
  color: var(--app-text-secondary, #666);
  font-size: 0.95rem;
}

/* Template List */
.templates-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.template-item {
  background: var(--app-card-bg, white);
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.2s;
}

.template-item:hover {
  border-color: var(--app-accent, #667eea);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.template-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.template-item-info {
  flex: 1;
}

.template-item-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text-primary, #1a202c);
  margin: 0 0 0.5rem 0;
}

.template-item-description {
  font-size: 0.9rem;
  color: var(--app-text-secondary, #666);
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

.template-item-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--app-text-tertiary, #999);
}

.template-field-count {
  font-weight: 600;
  color: var(--app-accent, #667eea);
}

.template-date {
  color: var(--app-text-tertiary, #999);
}

/* Template Actions */
.template-item-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-template-action {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-hover-bg, #f8f9fa);
}

.btn-template-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-template-action.btn-edit {
  background: linear-gradient(135deg, #667eea22 0%, #764ba222 100%);
  color: #667eea;
}

.btn-template-action.btn-edit:hover {
  background: linear-gradient(135deg, #667eea33 0%, #764ba233 100%);
}

.btn-template-action.btn-test {
  background: linear-gradient(135deg, #f093fb22 0%, #f5576c22 100%);
  color: #f5576c;
}

.btn-template-action.btn-test:hover {
  background: linear-gradient(135deg, #f093fb33 0%, #f5576c33 100%);
}

.btn-template-action.btn-delete {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

.btn-template-action.btn-delete:hover {
  background: rgba(255, 107, 107, 0.25);
}

/* Fields Preview */
.template-fields-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.template-field-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--app-hover-bg, #f8f9fa);
  border: 1px solid var(--app-border, #e0e0e0);
  border-radius: 6px;
  font-size: 0.85rem;
}

.template-field-chip .field-label {
  font-weight: 600;
  color: var(--app-text-primary, #1a202c);
}

.template-field-chip .field-required {
  color: #ff6b6b;
  font-weight: 700;
}

.template-field-chip .field-target {
  color: var(--app-text-tertiary, #999);
  font-size: 0.8rem;
}

.template-field-chip.more-fields {
  background: var(--app-accent-light, #e0e7ff);
  color: var(--app-accent, #667eea);
  font-weight: 600;
  border-color: var(--app-accent, #667eea);
}

/* Test Modal */
.template-test-preview {
  padding: 1rem 0;
}

.template-test-preview h3 {
  font-size: 1.3rem;
  color: var(--app-text-primary, #1a202c);
  margin-bottom: 0.5rem;
}

.template-test-description {
  color: var(--app-text-secondary, #666);
  margin-bottom: 2rem;
}

.template-form-preview {
  background: var(--app-hover-bg, #f8f9fa);
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--app-border, #e0e0e0);
}

.template-form-preview h4 {
  font-size: 1rem;
  color: var(--app-text-primary, #1a202c);
  margin: 0 0 1rem 0;
}

.template-field-preview {
  margin-bottom: 1.5rem;
}

.template-field-preview:last-child {
  margin-bottom: 0;
}

.template-field-preview label {
  display: block;
  font-weight: 600;
  color: var(--app-text-primary, #1a202c);
  margin-bottom: 0.5rem;
}

/* Dark Mode */
.dark-mode .template-management-modal,
.dark-mode .template-test-modal {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%);
  border-color: rgba(129, 140, 248, 0.3);
}

.dark-mode .modal-subtitle {
  color: rgba(129, 140, 248, 0.7);
}

.dark-mode .template-create-section {
  border-bottom-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .btn-create-template {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.25) 0%, rgba(129, 140, 248, 0.15) 100%);
  color: var(--app-accent, #818cf8);
  border: 2px solid rgba(129, 140, 248, 0.4);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}

.dark-mode .btn-create-template:hover {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.35) 0%, rgba(129, 140, 248, 0.25) 100%);
  box-shadow: 0 6px 20px rgba(129, 140, 248, 0.4);
}

.dark-mode .templates-empty-state {
  background: rgba(129, 140, 248, 0.05);
  border-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .templates-empty-state h3 {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .templates-empty-state p {
  color: rgba(129, 140, 248, 0.7);
}

.dark-mode .template-item {
  background: rgba(129, 140, 248, 0.05);
  border-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .template-item:hover {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.2);
}

.dark-mode .template-item-name {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .template-item-description {
  color: rgba(129, 140, 248, 0.7);
}

.dark-mode .template-field-count {
  color: var(--app-accent, #818cf8);
}

.dark-mode .template-date {
  color: rgba(129, 140, 248, 0.6);
}

.dark-mode .btn-template-action {
  background: rgba(129, 140, 248, 0.1);
  color: rgba(129, 140, 248, 0.9);
}

.dark-mode .btn-template-action:hover {
  background: rgba(129, 140, 248, 0.2);
  color: var(--app-accent, #818cf8);
}

.dark-mode .template-field-chip {
  background: rgba(129, 140, 248, 0.08);
  border-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .template-field-chip .field-label {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .template-field-chip .field-target {
  color: rgba(129, 140, 248, 0.6);
}

.dark-mode .template-field-chip.more-fields {
  background: rgba(129, 140, 248, 0.15);
  color: var(--app-accent, #818cf8);
  border-color: rgba(129, 140, 248, 0.4);
}

.dark-mode .template-test-preview h3 {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .template-test-description {
  color: rgba(129, 140, 248, 0.7);
}

.dark-mode .template-form-preview {
  background: rgba(129, 140, 248, 0.05);
  border-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .template-form-preview h4 {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .template-field-preview label {
  color: rgba(129, 140, 248, 0.9);
}

.dark-mode .template-field-preview input,
.dark-mode .template-field-preview textarea {
  background: rgba(129, 140, 248, 0.08);
  border-color: rgba(129, 140, 248, 0.3);
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .template-field-preview input::placeholder,
.dark-mode .template-field-preview textarea::placeholder {
  color: rgba(129, 140, 248, 0.5);
}
/* Projects View - Premium Edition */

.projects-view {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Header */
.projects-header {
  margin-bottom: 2rem;
}

.projects-header .header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.projects-header .header-top h2 {
  margin: 0;
  font-size: 2rem;
  color: var(--app-text-primary, #2c3e50);
}

.btn-import {
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-import:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5568d3 0%, #6b3fa3 100%);
}

/* Alerts */
.alert {
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Modern Search Section */
.search-section {
  margin-bottom: 1.5rem;
}

.search-box-modern {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-icon-modern {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--app-text-secondary, #666);
  pointer-events: none;
  z-index: 1;
}

.search-input-modern {
  width: 100%;
  padding: 1rem 3rem 1rem 3.5rem;
  border: 2px solid var(--app-border-medium, #e0e0e0);
  border-radius: 50px;
  font-size: 1rem;
  background: var(--app-card-bg, white);
  color: var(--app-text-primary, #2c3e50);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-input-modern:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
}

.btn-clear-search-modern {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 1.3rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}

.btn-clear-search-modern:hover {
  color: #666;
}

.projects-controls-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: var(--app-hover-bg, #f8f9fa);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.stats-summary {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.stat-item {
  font-size: 0.95rem;
  color: var(--app-text-secondary, #666);
}

.stat-item strong {
  color: var(--app-text-primary, #2c3e50);
  font-size: 1.1rem;
  margin-right: 0.35rem;
}

.stat-item.search-result {
  color: #667eea;
  font-weight: 500;
}

.filter-group-modern {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.filter-box-modern,
.sort-box-modern {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--app-card-bg, white);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-label,
.sort-label {
  font-size: 0.9rem;
  color: var(--app-text-secondary, #666);
  font-weight: 500;
}

.filter-select-modern,
.sort-select-modern {
  padding: 0.4rem 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--app-text-primary, #2c3e50);
  cursor: pointer;
  font-weight: 500;
  outline: none;
}

.filter-select-modern option,
.sort-select-modern option {
  background: var(--app-card-bg, white);
  color: var(--app-text-primary, #2c3e50);
}

/* Project Grid */
.projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Project Card */
.project-card {
  background: var(--app-card-bg, white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  position: relative;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Design vs Projekt Card - Visuelle Unterscheidung */
.design-card {
  border-color: rgba(156, 39, 176, 0.2);
  background: linear-gradient(to bottom, rgba(156, 39, 176, 0.03) 0%, var(--app-card-bg, white) 20%);
}

.design-card:hover {
  border-color: rgba(156, 39, 176, 0.4);
  box-shadow: 0 8px 24px rgba(156, 39, 176, 0.2);
}

.project-card.project-card {
  border-color: rgba(102, 126, 234, 0.2);
  background: linear-gradient(to bottom, rgba(102, 126, 234, 0.03) 0%, var(--app-card-bg, white) 20%);
}

.project-card.project-card:hover {
  border-color: rgba(102, 126, 234, 0.4);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

/* Type Badge */
.card-type-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 0.4rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.design-badge {
  background: rgba(156, 39, 176, 0.9);
  color: white;
}

.project-badge {
  background: rgba(102, 126, 234, 0.9);
  color: white;
}

/* Template Count Badge (Admin only) */
.template-count-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  padding: 0.4rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 193, 7, 0.95);
  color: #1a202c;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
  cursor: help;
  transition: all 0.2s;
}

.template-count-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

.project-thumbnail {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--app-hover-bg, #f8f9fa);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-info {
  padding: 1.25rem;
  flex: 1;
}

.project-name {
  margin: 0 0 0.75rem 0;
  font-size: 1.15rem;
  color: var(--app-text-primary, #2c3e50);
  font-weight: 600;
}

.project-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Material Preview Item */
.material-preview-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.material-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--app-border-light, #e0e0e0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.project-design-ref {
  font-size: 0.85rem;
  color: var(--app-accent, #667eea);
  margin-bottom: 0.5rem;
}

.project-date {
  font-size: 0.8rem;
  color: var(--app-text-tertiary, #999);
}

/* Actions */
.project-actions {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--app-border, #f0f0f0);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn-action {
  flex: 1;
  padding: 0.65rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-edit {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
  color: #667eea;
  border-color: transparent;
}

.btn-edit:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-reorder {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  color: #ff9800;
  border-color: transparent;
}

.btn-reorder:hover {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.more-actions {
  position: relative;
}

.btn-more {
  padding: 0.6rem 0.75rem;
  background: var(--app-hover-bg, #f5f5f5);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--app-text-secondary, #666);
}

.btn-more:hover {
  background: var(--app-border-medium, #e0e0e0);
}

.more-menu {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 0.5rem;
  background: var(--app-card-bg, white);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--app-card-shadow, rgba(0, 0, 0, 0.15));
  border: 1px solid var(--app-border, #f0f0f0);
  min-width: 150px;
  z-index: 100;
  animation: fadeIn 0.15s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.more-menu button {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--app-text-primary, #2c3e50);
}

.more-menu button:hover {
  background: var(--app-hover-bg, #f5f5f5);
}

.more-menu button.delete-action {
  color: #e74c3c;
}

.more-menu button.delete-action:hover {
  background: #ffebee;
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Tablet & Medium Screens (max 1024px) */
@media (max-width: 1024px) {
  .projects-view {
    padding: 1.5rem;
  }

  .projects-header .header-top h2 {
    font-size: 1.75rem;
  }

  .btn-import {
    padding: 0.8rem 1.75rem;
    font-size: 1rem;
  }

  .search-box-modern {
    max-width: 500px;
  }

  .projects-container {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .projects-view .empty-state {
    padding: 4rem 2.5rem;
  }

  .projects-view .empty-icon {
    font-size: 4.5rem;
  }

  .projects-view .empty-tips {
    padding: 2rem;
  }
}

/* Mobile & Small Tablets (max 768px) */
@media (max-width: 768px) {
  .projects-view {
    padding: 1rem;
  }

  .projects-header {
    margin-bottom: 1.5rem;
  }

  .projects-header .header-top {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
  }

  .projects-header .header-top h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  .btn-import {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }

  .search-box-modern {
    max-width: 100%;
  }

  .search-input-modern {
    padding: 0.875rem 2.5rem 0.875rem 3rem;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .search-icon-modern {
    left: 1rem;
  }

  .projects-controls-modern {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .filter-group-modern {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .filter-box-modern,
  .sort-box-modern {
    justify-content: space-between;
    padding: 0.75rem 1rem;
  }

  .filter-select-modern {
    font-size: 16px; /* Prevents iOS zoom */
    padding: 0.6rem;
  }

  .projects-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .alert {
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
  }

  .projects-view .empty-state {
    padding: 3rem 1.5rem;
  }

  .projects-view .empty-icon {
    font-size: 4rem;
  }

  .projects-view .empty-state h3 {
    font-size: 1.5rem;
  }

  .projects-view .empty-state p {
    font-size: 1rem;
  }

  .projects-view .empty-tips {
    padding: 1.5rem;
    margin-top: 2rem;
  }

  .projects-view .empty-tips h4 {
    font-size: 1.1rem;
  }

  .projects-view .empty-tips li {
    font-size: 0.9rem;
  }

  .projects-view .no-results {
    padding: 3rem 1.5rem;
  }
}

/* Small Mobile Screens (max 480px) */
@media (max-width: 480px) {
  .projects-view {
    padding: 0.75rem;
  }

  .projects-header {
    margin-bottom: 1rem;
  }

  .projects-header .header-top h2 {
    font-size: 1.35rem;
  }

  .btn-import {
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
  }

  .search-section {
    margin-bottom: 1rem;
  }

  .search-input-modern {
    padding: 0.75rem 2rem 0.75rem 2.75rem;
    font-size: 16px;
  }

  .search-icon-modern {
    left: 0.85rem;
    font-size: 1.1rem;
  }

  .filter-box-modern,
  .sort-box-modern {
    padding: 0.65rem 0.85rem;
  }

  .filter-label {
    font-size: 0.85rem;
  }

  .filter-select-modern {
    font-size: 14px;
    padding: 0.5rem;
  }

  .projects-container {
    gap: 0.75rem;
  }

  .alert {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }

  .projects-view .empty-state {
    padding: 2.5rem 1rem;
  }

  .projects-view .empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
  }

  .projects-view .empty-state h3 {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
  }

  .projects-view .empty-state p {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  .projects-view .empty-tips {
    padding: 1.25rem;
    margin-top: 1.5rem;
  }

  .projects-view .empty-tips h4 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  .projects-view .empty-tips li {
    font-size: 0.85rem;
    padding: 0.5rem 0;
  }

  .projects-view .no-results {
    padding: 2.5rem 1rem;
  }
}

/* Landscape Mobile (height < 600px) */
@media (max-height: 600px) and (orientation: landscape) {
  .projects-view {
    padding: 1rem 1.5rem;
  }

  .projects-header {
    margin-bottom: 1rem;
  }

  .projects-header .header-top {
    margin-bottom: 1rem;
  }

  .projects-header .header-top h2 {
    font-size: 1.35rem;
  }

  .btn-import {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
  }

  .search-section {
    margin-bottom: 1rem;
  }

  .search-input-modern {
    padding: 0.65rem 2rem 0.65rem 2.75rem;
  }

  .projects-controls-modern {
    gap: 0.75rem;
  }

  .filter-box-modern,
  .sort-box-modern {
    padding: 0.5rem 0.85rem;
  }

  .projects-container {
    gap: 0.75rem;
  }

  .alert {
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
  }

  .projects-view .empty-state {
    padding: 2rem 1.5rem;
  }

  .projects-view .empty-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
  }

  .projects-view .empty-state h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .projects-view .empty-state p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .projects-view .empty-tips {
    padding: 1.25rem;
    margin-top: 1.5rem;
  }

  .projects-view .empty-tips h4 {
    font-size: 0.95rem;
    margin-bottom: 0.65rem;
  }

  .projects-view .empty-tips li {
    font-size: 0.8rem;
    padding: 0.4rem 0;
  }
}

/* Touch-Friendly Elements */
@media (hover: none) and (pointer: coarse) {
  .btn-import {
    min-height: 48px;
  }

  .search-input-modern {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .filter-select-modern {
    min-height: 44px;
    padding: 0.75rem;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .filter-box-modern,
  .sort-box-modern {
    min-height: 44px;
  }

  /* Smooth scrolling */
  .projects-view,
  .projects-container {
    -webkit-overflow-scrolling: touch;
  }

  /* Remove hover effects on touch */
  .btn-import:hover {
    transform: none;
  }

  /* Add active states for feedback */
  .btn-import:active {
    opacity: 0.9;
    transform: scale(0.98);
  }

  .filter-select-modern:active {
    background: #f5f5f5;
  }
}

/* High-DPI Screens (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .filter-box-modern,
  .sort-box-modern {
    border-width: 0.75px;
  }

  .alert-success,
  .alert-error {
    border-width: 0.75px;
  }
}

/* Responsive Grid Improvements */
@media (min-width: 1400px) {
  .projects-container {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  .projects-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* Empty State für ProjectsView */
.projects-view .empty-state {
  text-align: center;
  padding: 5rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.projects-view .empty-icon {
  font-size: 5rem;
  margin-bottom: 1.5rem;
}

.projects-view .empty-state h3 {
  font-size: 1.8rem;
  color: var(--app-text-primary, #2c3e50);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.projects-view .empty-state p {
  color: var(--app-text-secondary, #666666);
  font-size: 1.15rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  font-weight: 500;
}

.projects-view .empty-tips {
  margin-top: 3rem;
  text-align: left;
  background: var(--app-hover-bg, #f8f9fa);
  padding: 2.5rem;
  border-radius: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.projects-view .empty-tips h4 {
  margin-top: 0;
  color: var(--app-text-primary, #2c3e50);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.projects-view .empty-tips ul {
  list-style: none;
  padding: 0;
}

.projects-view .empty-tips li {
  padding: 0.6rem 0;
  color: var(--app-text-secondary, #666);
  line-height: 1.5;
}

.projects-view .empty-tips li::before {
  content: "✓ ";
  color: #667eea;
  font-weight: bold;
  margin-right: 0.5rem;
}

/* No Results */
.projects-view .no-results {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Dark Mode Support */
.dark-mode .projects-header h2 {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .filter-box-modern {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(129, 140, 248, 0.2);
}

.dark-mode .filter-label {
  color: rgba(129, 140, 248, 0.8);
}

.dark-mode .filter-select-modern {
  color: var(--app-text-primary, #2c3e50);
}

.dark-mode .filter-select-modern option {
  background: var(--app-card-bg, white);
  color: var(--app-text-primary, #2c3e50);
}

.dark-mode .projects-view .empty-state h3 {
  color: #ffffff;
}

.dark-mode .projects-view .empty-state p {
  color: rgba(129, 140, 248, 0.85);
}

.dark-mode .projects-view .empty-state {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
  border: 2px solid rgba(129, 140, 248, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dark-mode .projects-view .empty-tips {
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .projects-view .empty-tips h4 {
  color: #e0e0e0;
}

.dark-mode .projects-view .empty-tips li {
  color: #b0b0b0;
}

.dark-mode .projects-view .empty-tips li::before {
  color: #8b9eea;
}

/* Dark Mode - Template Count Badge */
.dark-mode .template-count-badge {
  background: rgba(129, 140, 248, 0.95);
  color: rgba(26, 26, 46, 0.95);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4);
}

.dark-mode .template-count-badge:hover {
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.5);
}
/* Inspirationen Galerie Styles - Premium Edition */

.inspiration-gallery {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease-in;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header */
.gallery-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.header-content {
  text-align: center;
}

.gallery-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gallery-header .subtitle {
  font-size: 1.1rem;
  color: var(--app-text-secondary, #666);
  margin: 0;
}

/* Suchleiste */
.search-bar {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.search-input {
  width: 100%;
  padding: 1rem 3rem 1rem 1.5rem;
  font-size: 1rem;
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 50px;
  background: var(--app-card-bg, white);
  color: var(--app-text-primary, #2c3e50);
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.search-icon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--app-text-secondary, #666);
  pointer-events: none;
}

/* Kategorien Carousel */
.categories-carousel {
  position: relative;
  margin-bottom: 2rem;
  padding: 0 52px;
}

.categories-nav {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 1rem 0;
  border-bottom: 2px solid var(--app-border-light, #f0f0f0);
  scroll-behavior: smooth;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.categories-nav::-webkit-scrollbar {
  display: none;
}

.carousel-arrow {
  position: absolute;
  top: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--app-card-bg, white);
  border: 1px solid var(--app-border, #e0e0e0);
  color: var(--app-text-primary, #2c3e50);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 10;
  padding: 0;
  margin: 0;
}

.carousel-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--app-card-bg, white);
  border-color: var(--app-border-light, #f0f0f0);
  color: var(--app-text-tertiary, #ccc);
}

.carousel-arrow:not(:disabled):hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

.carousel-arrow:not(:disabled):active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.carousel-arrow-left {
  left: 0;
}

.carousel-arrow-right {
  right: 0;
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--app-border, #e0e0e0);
  background: var(--app-card-bg, white);
  color: var(--app-text-primary, #2c3e50);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 500;
}

.category-btn:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
  transform: translateY(-2px);
}

.category-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.category-icon {
  font-size: 1.2rem;
}

/* Vorlagen Sektion */
.templates-section {
  margin-bottom: 2rem;
}

.templates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.templates-header h2 {
  font-size: 1.8rem;
  color: var(--app-text-primary, #2c3e50);
  margin: 0;
}

.template-count {
  color: var(--app-text-secondary, #666);
  font-size: 0.95rem;
  font-weight: 500;
}

/* Vorlagen Grid */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* Template Card */
.template-card {
  background: var(--app-card-bg, white);
  border: 2px solid var(--app-border-medium, #e0e0e0);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.template-card:hover {
  border-color: #667eea;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
  transform: translateY(-4px);
}

.template-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-thumbnail {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.placeholder-icon {
  font-size: 4rem;
  opacity: 0.5;
  color: var(--app-text-tertiary, #999);
}

/* Featured Badge */
.featured-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
  z-index: 3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Type Badge */
.type-badge {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  padding: 0.35rem 0.75rem;
  color: white;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 600;
  z-index: 2;
  letter-spacing: 0.3px;
}

.type-badge.form {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.type-badge.inspiration {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Featured Card Highlight */
.template-card.featured {
  border-color: #f59e0b;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
}

.template-card.featured:hover {
  border-color: #d97706;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25);
}

/* Form Fields Info */
.form-fields-info {
  margin-top: 0.25rem;
}

.fields-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Legacy support for form-assistant-badge */
.form-assistant-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.4rem 0.9rem;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Template Info */
.template-info {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  margin: 0;
}

.template-description {
  font-size: 0.85rem;
  color: var(--app-text-secondary, #666);
  margin: 0;
  line-height: 1.4;
}

/* Tags */
.template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--app-border-light, #f0f0f0);
}

.tag {
  padding: 0.4rem 0.85rem;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Empfohlene Produkte */
.recommended-products {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--app-border-light, #f0f0f0);
  font-size: 0.85rem;
}

.recommended-label {
  color: var(--app-text-secondary, #666);
}

.product-count {
  color: #667eea;
  font-weight: 600;
}

/* Template Actions */
.template-actions {
  padding: 0 1rem 1rem;
}

.btn-use-template {
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-use-template:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Keine Vorlagen */
.no-templates {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--app-text-secondary, #666);
}

.no-templates p {
  font-size: 1.1rem;
  margin: 0.5rem 0;
}

.no-templates .hint {
  font-size: 0.95rem;
  color: var(--app-text-tertiary, #999);
}

/* Info Box */
.info-box {
  margin-top: 3rem;
  text-align: left;
  background: var(--app-hover-bg, #f8f9fa);
  padding: 2.5rem;
  border-radius: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.info-box h3 {
  margin-top: 0;
  color: var(--app-text-primary, #2c3e50);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.info-box ul {
  list-style: none;
  padding: 0;
}

.info-box li {
  padding: 0.6rem 0;
  color: var(--app-text-secondary, #666);
  line-height: 1.5;
}

.info-box li::before {
  content: "✓ ";
  color: #667eea;
  font-weight: bold;
  margin-right: 0.5rem;
}

/* Dark Mode Support */
.dark-mode .gallery-header h1 {
  background: linear-gradient(135deg, #ffffff 0%, var(--app-accent, #818cf8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(129, 140, 248, 0.4));
}

.dark-mode .template-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid rgba(129, 140, 248, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.dark-mode .template-card:hover {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 8px 24px rgba(129, 140, 248, 0.3);
}

.dark-mode .template-thumbnail {
  background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
}

.dark-mode .placeholder-thumbnail {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

.dark-mode .info-box {
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .info-box h3 {
  color: #e0e0e0;
}

.dark-mode .info-box li {
  color: #b0b0b0;
}

.dark-mode .info-box li::before {
  color: #8b9eea;
}

/* Loading State */
.loading-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--app-text-secondary, #666);
}

.loading-state .loading-spinner {
  width: 50px;
  height: 50px;
  margin: 0 auto 1.5rem;
  border: 4px solid rgba(102, 126, 234, 0.1);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-state p {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Responsive Design */
@media (max-width: 768px) {
  .inspiration-gallery {
    padding: 1rem;
  }

  .gallery-header h1 {
    font-size: 2rem;
  }

  .templates-grid {
    grid-template-columns: 1fr;
  }

  .categories-nav {
    gap: 0.5rem;
  }

  .category-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  .templates-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .search-input {
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    font-size: 0.95rem;
  }

  .search-icon {
    right: 1rem;
  }
}
/* ================================================
   Lunaria Links Analytics - Blue Theme
   Professional analytics dashboard
   ================================================ */

.lunaria-analytics {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 50%, #f5f8ff 100%);
  padding: 2rem 0;
}

.analytics-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ================================================
   Loading & Error States
   ================================================ */

.analytics-loading,
.analytics-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 1.5rem;
}

.analytics-error p {
  font-size: 1.1rem;
  color: #f56565;
}

/* ================================================
   Header
   ================================================ */

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid rgba(102, 126, 234, 0.2);
}

.analytics-header h1 {
  font-size: 2.25rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.03em;
}

.analytics-subtitle {
  font-size: 1rem;
  color: #7c8db5;
  margin: 0;
  font-weight: 500;
}

/* ================================================
   Time Range Filter
   ================================================ */

.time-range-filter {
  display: flex;
  gap: 0.5rem;
  background: white;
  padding: 0.5rem;
  border-radius: 12px;
  border: 2px solid rgba(102, 126, 234, 0.15);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
}

.time-range-filter .filter-btn {
  padding: 0.6rem 1.25rem;
  border: 2px solid transparent;
  background: transparent;
  color: #7c8db5;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.time-range-filter .filter-btn:hover {
  background: rgba(102, 126, 234, 0.05);
  color: #667eea;
}

.time-range-filter .filter-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* ================================================
   Stats Grid
   ================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  background: white;
  border: 2px solid rgba(102, 126, 234, 0.15);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.08);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.stat-icon {
  font-size: 3rem;
  line-height: 1;
  filter: grayscale(0.2);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: #7c8db5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ================================================
   Chart Card
   ================================================ */

.chart-card {
  background: white;
  border: 2px solid rgba(102, 126, 234, 0.15);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12);
}

.chart-header {
  margin-bottom: 2rem;
}

.chart-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.5rem 0;
}

.chart-subtitle {
  font-size: 0.95rem;
  color: #7c8db5;
  margin: 0;
  font-weight: 500;
}

.chart-container {
  width: 100%;
  overflow-x: auto;
}

.line-chart {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #a0aec0;
  font-size: 1.1rem;
}

/* ================================================
   Top Links Card
   ================================================ */

.top-links-card {
  background: white;
  border: 2px solid rgba(102, 126, 234, 0.15);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12);
}

.top-links-header {
  margin-bottom: 2rem;
}

.top-links-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.5rem 0;
}

.top-links-subtitle {
  font-size: 0.95rem;
  color: #7c8db5;
  margin: 0;
  font-weight: 500;
}

.top-links-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.top-link-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem;
  background: linear-gradient(to right, #f8f9ff 0%, #f0f4ff 100%);
  border: 2px solid rgba(102, 126, 234, 0.1);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.top-link-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
  transform: translateX(4px);
}

.top-link-rank {
  font-size: 1.5rem;
  font-weight: 800;
  color: #667eea;
  min-width: 3rem;
  text-align: center;
}

.top-link-info {
  flex: 1;
  min-width: 0;
}

.top-link-title {
  font-size: 1rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-link-code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.85rem;
  background: white;
  color: #667eea;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  font-weight: 700;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.top-link-bar-container {
  flex: 1;
  height: 8px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.top-link-bar {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.top-link-clicks {
  font-size: 1.25rem;
  font-weight: 800;
  color: #667eea;
  min-width: 4rem;
  text-align: right;
}

/* ================================================
   Empty State
   ================================================ */

.analytics-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border: 2px solid rgba(102, 126, 234, 0.15);
  border-radius: 16px;
  margin-top: 2.5rem;
}

.analytics-empty .empty-icon {
  font-size: 5rem;
  opacity: 0.3;
  margin-bottom: 1.5rem;
  filter: grayscale(1);
}

.analytics-empty h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #667eea;
  margin: 0 0 0.75rem 0;
}

.analytics-empty p {
  font-size: 1rem;
  color: #7c8db5;
  margin: 0;
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .analytics-container {
    padding: 0 1rem;
  }

  .analytics-header {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .time-range-filter {
    width: 100%;
  }

  .time-range-filter .filter-btn {
    flex: 1;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 1.5rem;
  }

  .stat-value {
    font-size: 2rem;
  }

  .chart-card,
  .top-links-card {
    padding: 1.5rem;
  }

  .top-link-item {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .top-link-bar-container {
    flex-basis: 100%;
  }
}

/* ================================================
   Animation
   ================================================ */

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-card,
.chart-card,
.top-links-card {
  animation: slideIn 0.4s ease;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }

.top-link-item:nth-child(1) { animation: slideIn 0.3s ease 0.1s both; }
.top-link-item:nth-child(2) { animation: slideIn 0.3s ease 0.15s both; }
.top-link-item:nth-child(3) { animation: slideIn 0.3s ease 0.2s both; }
.top-link-item:nth-child(4) { animation: slideIn 0.3s ease 0.25s both; }
.top-link-item:nth-child(5) { animation: slideIn 0.3s ease 0.3s both; }
/* ================================================
   Lunaria Links Panel - Elegant Blue Theme
   Modern table interface with Lunaria blue accents
   ================================================ */

.lunaria-links-panel {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 50%, #f5f8ff 100%);
  padding: 2rem 0;
}

.lunaria-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ================================================
   Loading State
   ================================================ */

.lunaria-panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 1.5rem;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #d0dfff;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ================================================
   Modern Header
   ================================================ */

.panel-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(102, 126, 234, 0.2);
}

/* ================================================
   Tab Navigation
   ================================================ */

.tab-navigation {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid rgba(102, 126, 234, 0.1);
  padding-bottom: 0;
}

.tab-btn {
  padding: 1rem 2rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #7c8db5;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  bottom: -2px;
}

.tab-btn:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.tab-btn.active {
  color: #667eea;
  border-bottom-color: #667eea;
  background: rgba(102, 126, 234, 0.08);
}

.panel-header-modern h1 {
  font-size: 2.25rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.03em;
}

.panel-subtitle-modern {
  font-size: 1rem;
  color: #7c8db5;
  margin: 0;
  font-weight: 500;
}

.quota-badge-modern {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.6rem 1.25rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

/* ================================================
   Modern Table Container
   ================================================ */

.table-container-modern {
  background: white;
  border: 2px solid rgba(102, 126, 234, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12);
}

.links-table-modern {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* ================================================
   Table Header
   ================================================ */

.links-table-modern thead {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-bottom: 2px solid rgba(102, 126, 234, 0.2);
}

.links-table-modern thead th {
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #667eea;
}

.col-hint {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: none;
  color: #a0aec0;
  margin-top: 0.3rem;
  letter-spacing: 0;
}

.col-title-modern { width: 18%; }
.col-shortcode-modern { width: 22%; }
.col-target-modern { width: 28%; }
.col-usage-modern { width: 12%; }
.col-clicks-modern { width: 8%; }
.col-qr-modern { width: 7%; }
.col-actions-modern { width: 5%; }

/* ================================================
   Table Rows
   ================================================ */

.links-table-modern tbody tr {
  border-bottom: 1px solid rgba(102, 126, 234, 0.08);
  transition: all 0.2s ease;
}

.data-row-modern:hover {
  background: linear-gradient(to right, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
  transform: translateX(2px);
}

.data-row-modern.inactive {
  opacity: 0.45;
}

.links-table-modern tbody td {
  padding: 1.25rem 1.5rem;
  vertical-align: middle;
}

/* ================================================
   Add New Row
   ================================================ */

.add-row-modern {
  cursor: pointer;
  background: linear-gradient(to right, rgba(102, 126, 234, 0.04) 0%, rgba(118, 75, 162, 0.04) 100%);
  border-bottom: 2px solid rgba(102, 126, 234, 0.15) !important;
}

.add-row-modern:hover {
  background: linear-gradient(to right, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
}

.add-btn-modern {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #667eea;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.6rem 0;
}

/* ================================================
   New Row Editing State
   ================================================ */

.new-row-modern {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-left: 4px solid #667eea !important;
}

/* ================================================
   Inline Inputs
   ================================================ */

.inline-input-modern {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 2px solid rgba(102, 126, 234, 0.2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: #2d3748;
  background: white;
  transition: all 0.2s ease;
  font-family: inherit;
}

.inline-input-modern:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  background: #fafbff;
}

.inline-input-modern::placeholder {
  color: #a0aec0;
}

.inline-input-modern.status-ok {
  border-color: #48bb78;
  background: #f0fff4;
}

.inline-input-modern.status-error {
  border-color: #f56565;
  background: #fff5f5;
}

/* ================================================
   Shortcode Display & Input
   ================================================ */

.shortcode-wrapper-modern {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
}

.shortcode-display-modern {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.shortcode-display-modern code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.9rem;
  background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
  color: #667eea;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-weight: 700;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.status-icon-modern {
  font-size: 1.2rem;
  line-height: 1;
}

.status-icon-modern.ok {
  color: #48bb78;
}

.status-icon-modern.error {
  color: #f56565;
}

.error-hint-modern {
  font-size: 0.75rem;
  color: #f56565;
  margin-top: 0.4rem;
  font-weight: 600;
}

/* ================================================
   Content Display
   ================================================ */

.title-display-modern {
  font-weight: 600;
  color: #2d3748;
  font-size: 0.95rem;
}

.muted-modern {
  color: #cbd5e0;
  font-style: italic;
  font-size: 0.875rem;
}

.target-link-modern {
  color: #667eea;
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  font-weight: 500;
}

.target-link-modern:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* ================================================
   Usage Badge Button
   ================================================ */

.usage-badge-btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.usage-badge-btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
}

.usage-count-modern {
  font-size: 1.1rem;
  font-weight: 800;
}

.usage-label-modern {
  font-size: 0.75rem;
  font-weight: 600;
}

.clicks-display-modern {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #667eea;
}

/* ================================================
   QR Code Button
   ================================================ */

.btn-qr-modern {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.btn-qr-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

/* ================================================
   Action Buttons
   ================================================ */

.action-btns-modern {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.btn-icon-modern {
  background: transparent;
  border: 2px solid transparent;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  line-height: 1;
}

.btn-icon-modern:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.2);
}

.btn-icon-modern.danger:hover {
  background: rgba(245, 101, 101, 0.1);
  border-color: rgba(245, 101, 101, 0.2);
}

.btn-copy-modern {
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.2s ease;
  font-size: 1.1rem;
  padding: 0.25rem;
  line-height: 1;
}

.btn-copy-modern:hover {
  opacity: 1;
  transform: scale(1.1);
}

.btn-save-modern,
.btn-cancel-modern {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid;
}

.btn-save-modern {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-save-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-cancel-modern {
  background: white;
  color: #7c8db5;
  border-color: rgba(102, 126, 234, 0.3);
}

.btn-cancel-modern:hover {
  background: rgba(102, 126, 234, 0.05);
  border-color: #667eea;
}

/* ================================================
   Empty State
   ================================================ */

.empty-state-modern {
  text-align: center;
  padding: 4rem 2rem !important;
  color: #a0aec0;
}

.empty-icon-modern {
  font-size: 4.5rem;
  opacity: 0.4;
  margin-bottom: 1.5rem;
  filter: grayscale(1);
}

.empty-state-modern p {
  font-size: 1.15rem;
  margin-bottom: 2rem;
  font-weight: 500;
}

.btn-primary-modern {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.9rem 2rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.btn-primary-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

/* ================================================
   QR Code Modal
   ================================================ */

.qr-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(45, 55, 72, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 2rem;
  animation: fadeIn 0.2s ease;
}

.qr-modal {
  background: white;
  border-radius: 20px;
  box-shadow: 0 25px 80px rgba(102, 126, 234, 0.3);
  max-width: 500px;
  width: 100%;
  padding: 3rem;
  text-align: center;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 3px solid rgba(102, 126, 234, 0.2);
}

.qr-modal-header {
  margin-bottom: 2rem;
}

.qr-modal-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.5rem 0;
}

.qr-modal-subtitle {
  font-size: 0.9rem;
  color: #7c8db5;
  margin: 0;
}

.qr-code-container {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  padding: 2rem;
  border-radius: 16px;
  margin: 2rem 0;
  border: 2px solid rgba(102, 126, 234, 0.15);
  display: inline-block;
}

.qr-code-canvas {
  display: block;
  margin: 0 auto;
}

.qr-modal-instruction {
  font-size: 0.95rem;
  color: #667eea;
  font-weight: 600;
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(102, 126, 234, 0.08);
  border-radius: 10px;
}

.qr-modal-info {
  text-align: left;
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(102, 126, 234, 0.15);
}

.qr-modal-info p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: #2d3748;
}

.qr-modal-info strong {
  color: #667eea;
  font-weight: 700;
}

.qr-modal-info code {
  background: white;
  color: #667eea;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
}

.qr-modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.btn-download-qr {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-download-qr:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-close-qr {
  background: white;
  color: #7c8db5;
  border: 2px solid rgba(102, 126, 234, 0.2);
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-close-qr:hover {
  background: rgba(102, 126, 234, 0.05);
  border-color: #667eea;
}

/* ================================================
   Usage Modal
   ================================================ */

.modal-overlay-modern {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(45, 55, 72, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 2rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-modern {
  background: white;
  border-radius: 20px;
  box-shadow: 0 25px 80px rgba(102, 126, 234, 0.3);
  max-width: 650px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 3px solid rgba(102, 126, 234, 0.15);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2.5rem;
  border-bottom: 2px solid rgba(102, 126, 234, 0.15);
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
}

.modal-header-modern h3 {
  font-size: 1.4rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.btn-close-modern {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: #a0aec0;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
  transition: all 0.2s ease;
}

.btn-close-modern:hover {
  color: #667eea;
  transform: rotate(90deg);
}

.modal-body-modern {
  flex: 1;
  overflow-y: auto;
  padding: 2.5rem;
}

.modal-subtitle-text {
  font-size: 0.95rem;
  color: #7c8db5;
  margin: 0 0 2rem 0;
  font-weight: 500;
}

.modal-subtitle-text code {
  background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
  color: #667eea;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-weight: 700;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.modal-loading-modern,
.modal-error-modern,
.modal-empty-modern {
  text-align: center;
  padding: 3rem;
  color: #7c8db5;
}

/* ================================================
   Usage List
   ================================================ */

.usage-list-modern {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.usage-item-modern {
  background: linear-gradient(to right, #f8f9ff 0%, #f0f4ff 100%);
  border: 2px solid rgba(102, 126, 234, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.usage-item-modern:hover {
  border-color: #667eea;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
  transform: translateX(4px);
}

.usage-item-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.usage-item-header-modern strong {
  font-size: 1rem;
  color: #2d3748;
  font-weight: 700;
}

.usage-times-modern {
  font-size: 0.8rem;
  color: #667eea;
  background: white;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 2px solid rgba(102, 126, 234, 0.2);
  font-weight: 700;
}

.usage-project-modern {
  font-size: 0.9rem;
  color: #7c8db5;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.usage-actions-modern {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-open-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.btn-open-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 1024px) {
  .col-title-modern { width: 20%; }
  .col-shortcode-modern { width: 22%; }
  .col-target-modern { width: 30%; }
  .col-usage-modern { width: 12%; }
  .col-clicks-modern { width: 8%; }
  .col-qr-modern { width: 8%; }
}

@media (max-width: 768px) {
  .lunaria-container {
    padding: 0 1rem;
  }

  .panel-header-modern {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .links-table-modern {
    font-size: 0.85rem;
  }

  .links-table-modern thead th,
  .links-table-modern tbody td {
    padding: 0.875rem;
  }

  .qr-modal {
    padding: 2rem;
  }
}
/* ==========================================
   Dark Mode Toggle - Elegant Icon Button
   ========================================== */

.dark-mode-toggle {
  position: fixed !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 999999 !important;

  /* Elegant button styling */
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--app-border, #e2e8f0);
  background: var(--app-card-bg, #ffffff);

  /* Icon centering */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Colors and effects */
  color: var(--app-text-secondary, #475569);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Ensure visibility */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

.dark-mode-toggle:hover {
  background: var(--app-hover-bg, #f1f5f9);
  border-color: var(--app-accent, #667eea);
  color: var(--app-accent, #667eea);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-1px);
}

.dark-mode-toggle:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Specific Styles */
.dark-mode .dark-mode-toggle {
  border-color: var(--app-border, #334155);
  background: var(--app-card-bg, #1e293b);
  color: var(--app-text-secondary, #cbd5e1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .dark-mode-toggle:hover {
  background: var(--app-hover-bg, #2d3a4f);
  border-color: var(--app-accent, #818cf8);
  color: var(--app-accent, #818cf8);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.2);
}

/* Icon styling */
.dark-mode-toggle svg {
  transition: all 0.2s ease;
}

.dark-mode-toggle:hover svg {
  transform: rotate(10deg);
}

/* Responsive */
@media (max-width: 768px) {
  .dark-mode-toggle {
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
  }

  .dark-mode-toggle svg {
    width: 18px;
    height: 18px;
  }
}
/* AdminBadge - Professional Minimal Design */

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;

  /* Minimal styling - matches ERP design */
  background: var(--app-card-bg, #ffffff);
  color: var(--app-text-secondary, #475569);
  border: 1.5px solid var(--app-border, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admin-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.admin-badge__text {
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Admin role styling - clean and professional */
.admin-badge--admin {
  background: var(--app-card-bg, #ffffff);
  color: var(--app-text-secondary, #475569);
  border-color: var(--app-border, #e2e8f0);
}

.admin-badge--admin:hover {
  background: var(--app-hover-bg, #f1f5f9);
  border-color: var(--app-accent, #667eea);
  color: var(--app-accent, #667eea);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.1);
}

/* Superadmin - same minimal style, no pink! */
.admin-badge--superadmin {
  background: var(--app-card-bg, #ffffff);
  color: var(--app-text-secondary, #475569);
  border-color: var(--app-accent, #667eea);
}

.admin-badge--superadmin:hover {
  background: var(--app-accent-light, #e0e7ff);
  border-color: var(--app-accent, #667eea);
  color: var(--app-accent, #667eea);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.15);
}

/* Active state */
.admin-badge:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Dark Mode */
.dark-mode .admin-badge {
  background: var(--app-card-bg, #1e293b);
  color: var(--app-text-secondary, #cbd5e1);
  border-color: var(--app-border, #334155);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-badge--admin:hover,
.dark-mode .admin-badge--superadmin:hover {
  background: var(--app-hover-bg, #2d3a4f);
  border-color: var(--app-accent, #818cf8);
  color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 6px rgba(129, 140, 248, 0.2);
}

/* Compact version (icon only) */
.admin-badge--compact {
  padding: 8px;
  border-radius: 8px;
}

.admin-badge--compact .admin-badge__text {
  display: none;
}
/* Backend Logs Modal */
.backend-logs-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 20px;
  overflow: auto;
}

.backend-logs-modal {
  background: var(--bg-primary, #ffffff);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: min(1400px, 95vw);
  max-height: min(90vh, 800px);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: auto;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
}

.modal-close-btn:hover {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-primary, #111827);
}

/* Controls */
.logs-controls {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.controls-row {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 16px;
  align-items: center;
}

.controls-actions {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}

.control-group select,
.control-group input[type="text"] {
  padding: 6px 12px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  font-size: 14px;
  background: white;
  color: var(--text-primary, #111827);
}

.control-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.search-group {
  flex: 1;
  min-width: 200px;
}

.search-group input {
  width: 100%;
}

.btn-refresh,
.btn-copy-all,
.btn-clear {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-refresh {
  background: var(--accent-blue, #3b82f6);
  color: white;
}

.btn-refresh:hover:not(:disabled) {
  background: var(--accent-blue-dark, #2563eb);
}

.btn-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-copy-all {
  background: #10b981;
  color: white;
}

.btn-copy-all:hover:not(:disabled) {
  background: #059669;
}

.btn-copy-all:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-clear {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-secondary, #6b7280);
  border: 1px solid var(--border-color, #e5e7eb);
}

.btn-clear:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Logs Container */
.logs-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

.logs-loading,
.logs-error,
.logs-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-secondary, #6b7280);
}

.logs-error {
  color: var(--error, #ef4444);
}

/* Log Entry */
.log-entry {
  border-left: 3px solid #e5e7eb;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--bg-secondary, #f9fafb);
  border-radius: 6px;
  transition: background 0.2s;
}

.log-entry:hover {
  background: var(--bg-tertiary, #f3f4f6);
}

.log-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
}

.log-timestamp {
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}

.log-level {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
}

.log-logger {
  color: var(--text-tertiary, #9ca3af);
  font-style: italic;
}

.log-copy-btn {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.2s;
}

.log-copy-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}

.log-message {
  color: var(--text-primary, #111827);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

.log-exception {
  margin-top: 12px;
  padding: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}

.log-exception summary {
  color: #dc2626;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.log-exception pre {
  margin-top: 8px;
  padding: 12px;
  background: white;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  color: #991b1b;
}

/* Footer */
.logs-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  text-align: center;
  background: var(--bg-secondary, #f9fafb);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .backend-logs-modal {
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-color: #374151;
  }

  .control-group select,
  .control-group input[type="text"] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .log-entry {
    background: #111827;
  }

  .log-entry:hover {
    background: #1f2937;
  }

  .log-exception {
    background: #7f1d1d;
    border-color: #991b1b;
  }

  .log-exception summary {
    color: #fca5a5;
  }

  .log-exception pre {
    background: #450a0a;
    color: #fecaca;
  }
}
/* Error Log Viewer Styles */

.error-log-viewer {
  padding: 20px;
  max-width: 1800px;
  margin: 0 auto;
}

/* Header */
.log-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e0e0e0;
}

.log-viewer-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.subtitle {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.header-stats {
  display: flex;
  gap: 16px;
}

.stat-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  min-width: 80px;
}

.stat-badge.error {
  background: #fff5f5;
  border-color: #fecaca;
}

.stat-badge.warning {
  background: #fffbf0;
  border-color: #fde68a;
}

.stat-badge.audit {
  background: #f0f9ff;
  border-color: #bfdbfe;
}

.stat-badge .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-badge .stat-label {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  font-weight: 600;
}

/* Filters */
.log-filters {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

.search-input,
.filter-select {
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 14px;
}

.search-input {
  min-width: 300px;
  flex: 1;
}

.filter-select {
  min-width: 150px;
}

.search-input:focus,
.filter-select:focus {
  outline: none;
  border-color: #5c6ac4;
  box-shadow: 0 0 0 2px rgba(92, 106, 196, 0.1);
}

.filter-actions {
  display: flex;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
}

.btn-export,
.btn-clear {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-export {
  background: #17a2b8;
  color: white;
}

.btn-export:hover:not(:disabled) {
  background: #138496;
}

.btn-clear {
  background: #dc3545;
  color: white;
}

.btn-clear:hover:not(:disabled) {
  background: #c82333;
}

.btn-export:disabled,
.btn-clear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Results Info */
.results-info {
  margin-bottom: 16px;
  padding: 10px 16px;
  background: #e9ecef;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #fafafa;
  border-radius: 12px;
  border: 2px dashed #d0d0d0;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 16px;
}

/* Logs Container */
.logs-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Log Entry */
.log-entry {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

.log-entry.error {
  border-left: 4px solid #dc3545;
}

.log-entry.warning {
  border-left: 4px solid #ffc107;
}

.log-entry.info {
  border-left: 4px solid #17a2b8;
}

.log-entry:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.log-entry.expanded {
  border-color: #5c6ac4;
}

/* Log Summary */
.log-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.log-summary:hover {
  background: #f8f9fa;
}

.log-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.log-main {
  flex: 1;
  min-width: 0;
}

.log-message {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 15px;
  color: #212529;
}

.log-message strong {
  font-weight: 600;
}

.log-badge {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
}

.log-badge.audit {
  background: #d1ecf1;
  color: #0c5460;
}

.log-badge.backend {
  background: #e2e3e5;
  color: #383d41;
}

.log-badge.category {
  background: #e7e9fc;
  color: #4c5ab8;
}

.log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #6c757d;
}

.log-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-timestamp {
  font-weight: 600;
}

.meta-route,
.meta-component,
.meta-modal {
  padding: 2px 6px;
  background: #e9ecef;
  border-radius: 4px;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 11px;
}

/* Log Actions */
.log-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-copy,
.btn-expand {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d0d0d0;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-copy:hover,
.btn-expand:hover {
  background: #f8f9fa;
  border-color: #5c6ac4;
}

/* Log Details */
.log-details {
  padding: 20px;
  background: #f8f9fa;
  border-top: 2px solid #e0e0e0;
}

.details-section {
  margin-bottom: 20px;
  padding: 16px;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.details-section:last-child {
  margin-bottom: 0;
}

.details-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
}

.details-section summary h4 {
  display: inline;
  cursor: pointer;
}

.details-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  font-size: 13px;
}

.detail-label {
  font-weight: 600;
  color: #6c757d;
}

.detail-value {
  color: #212529;
  word-break: break-word;
}

.detail-value.code {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 11px;
  background: #f1f3f5;
  padding: 4px 8px;
  border-radius: 4px;
}

.detail-json,
.detail-stack {
  background: #212529;
  color: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
  overflow-x: auto;
  margin: 0;
  line-height: 1.5;
}

.detail-stack {
  color: #ff6b6b;
  max-height: 300px;
  overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .log-viewer-header {
    flex-direction: column;
    gap: 20px;
  }

  .header-stats {
    flex-wrap: wrap;
  }

  .filter-row {
    flex-direction: column;
  }

  .search-input {
    min-width: 100%;
  }

  .log-summary {
    flex-wrap: wrap;
  }

  .log-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Dark Mode Support */
.dark-mode .error-log-viewer {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .log-viewer-header {
  border-bottom-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .log-viewer-header h2 {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .subtitle {
  color: rgba(129, 140, 248, 0.7);
}

.dark-mode .stat-badge {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(129, 140, 248, 0.3);
}

.dark-mode .stat-badge .stat-value {
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .log-filters {
  background: rgba(0, 0, 0, 0.2);
}

.dark-mode .search-input,
.dark-mode .filter-select {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(129, 140, 248, 0.3);
  color: rgba(129, 140, 248, 0.95);
}

.dark-mode .log-entry {
  background: rgba(26, 26, 46, 0.6);
  border-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .log-summary:hover {
  background: rgba(129, 140, 248, 0.08);
}

.dark-mode .log-details {
  background: rgba(0, 0, 0, 0.3);
  border-top-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .details-section {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(129, 140, 248, 0.2);
}

.dark-mode .btn-copy,
.dark-mode .btn-expand {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(129, 140, 248, 0.3);
  color: rgba(129, 140, 248, 0.9);
}

.dark-mode .btn-copy:hover,
.dark-mode .btn-expand:hover {
  background: rgba(129, 140, 248, 0.15);
  border-color: rgba(129, 140, 248, 0.6);
}
/* AdminDebugButtons - Superadmin Debug Tools */

.admin-debug-buttons {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-right: 0.5rem;
}

.admin-debug-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 6px;
  border: 2px solid transparent;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.admin-debug-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.admin-debug-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.admin-debug-btn:active {
  transform: translateY(0);
}

/* Copy Button States */
.admin-debug-btn--copy.copying {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-color: #10b981;
}

.admin-debug-btn--copy.copying svg {
  animation: checkmark 0.3s ease;
}

@keyframes checkmark {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Logs Button - Blue Theme */
.admin-debug-btn--logs {
  background: rgba(0, 102, 255, 0.1);
  color: #0066FF;
  border-color: transparent;
}

.admin-debug-btn--logs:hover {
  background: rgba(0, 102, 255, 0.15);
  border-color: #0066FF;
}

/* Errors Button - Red Theme */
.admin-debug-btn--errors {
  background: rgba(255, 59, 48, 0.1);
  color: #FF3B30;
  border-color: transparent;
}

.admin-debug-btn--errors:hover {
  background: rgba(255, 59, 48, 0.15);
  border-color: #FF3B30;
}

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

/* Responsive */
@media (max-width: 768px) {
  .admin-debug-buttons {
    gap: 0.35rem;
  }

  .admin-debug-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }

  .admin-debug-btn span {
    display: none; /* Hide text on mobile, show only icons */
  }
}

/* Dark Mode */
[data-theme="dark"] .admin-debug-btn {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

[data-theme="dark"] .admin-debug-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: #a5b4fc;
}
.view-mode-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.view-mode-banner__content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.view-mode-banner__icon {
  font-size: 20px;
}

.view-mode-banner__text {
  font-weight: 600;
  font-size: 14px;
}

.view-mode-banner__button {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-mode-banner__button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

.view-mode-banner__button:active {
  transform: translateY(0);
}

/* Push app content down when banner is visible */
body:has(.view-mode-banner) .app-header {
  margin-top: 48px;
}

/* Dark mode support */

.dark-mode .view-mode-banner {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  }

/* Introduction Screen - Welcome & Tour (Premium Edition) */

.introduction-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(129, 140, 248, 0.15) 0%, rgba(0, 0, 0, 0.85) 100%);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 2rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.introduction-modal {
  background: var(--app-bg, #ffffff);
  border-radius: 24px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(129, 140, 248, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  max-width: 1100px;
  width: 92%;
  max-height: 90vh;
  overflow-y: hidden; /* ✅ Content container scrolls, not modal */
  position: relative;
  animation: slideUp 0.4s ease;
  display: flex;
  flex-direction: column;
}

/* Custom Scrollbar für Modal - Edel */
.introduction-modal::-webkit-scrollbar {
  width: 10px;
}

.introduction-modal::-webkit-scrollbar-track {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.05) 0%, rgba(129, 140, 248, 0.1) 100%);
  border-radius: 5px;
  border: 1px solid rgba(129, 140, 248, 0.1);
}

.introduction-modal::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, #b8935a 100%);
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
}

.introduction-modal::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #d4b886 0%, var(--app-accent, #818cf8) 100%);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.5);
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.introduction-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
  color: white;
  padding: 1.25rem 1.75rem;
  text-align: center;
  border-radius: 24px 24px 0 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.introduction-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.15) 0%, transparent 50%, rgba(129, 140, 248, 0.1) 100%);
  pointer-events: none;
}

.introduction-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--app-accent, #818cf8) 50%, transparent 100%);
}

.introduction-header h1 {
  margin: 0 0 0.35rem 0;
  font-size: 2rem;
  font-weight: 800;
  text-shadow: 0 2px 20px rgba(129, 140, 248, 0.5);
  background: linear-gradient(135deg, #ffffff 0%, var(--app-accent, #818cf8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.introduction-subtitle {
  margin: 0;
  font-size: 1rem;
  color: rgba(129, 140, 248, 0.9);
  font-weight: 500;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

.introduction-content {
  padding: 1.25rem 1.75rem;
  flex: 1 1 auto;
  overflow-y: auto; /* ✅ Content is the scroll container */
  min-height: 0;
  /* padding-bottom ensures last content has breathing room and doesn't get covered by footer */
  padding-bottom: 1.5rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.feature-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 14px;
  padding: 1.5rem;
  border: 2px solid rgba(102, 126, 234, 0.4);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(102, 126, 234, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.7);
}

.feature-icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  display: block;
  filter: drop-shadow(0 0 12px rgba(102, 126, 234, 0.6));
  font-weight: 300;
  line-height: 1;
  padding: 0.25rem 0;
}

.feature-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.feature-card p {
  margin: 0 0 0.75rem 0;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  font-size: 0.9rem;
}

.feature-highlights li {
  padding: 0.35rem 0;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.feature-highlights li::before {
  color: #667eea;
  text-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
}

/* Premium Card für Vorlagen & Inspirationen */
.feature-card-premium {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid var(--app-accent, #818cf8);
  box-shadow: 0 8px 24px rgba(129, 140, 248, 0.25);
  position: relative;
}

.feature-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(129, 140, 248, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.feature-card-premium::after {
  content: '◆ PREMIUM';
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #d4b886;
  background: rgba(129, 140, 248, 0.2);
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1.5px solid rgba(129, 140, 248, 0.5);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
  backdrop-filter: blur(10px);
}

.feature-card-premium .feature-icon {
  filter: drop-shadow(0 0 12px rgba(129, 140, 248, 0.7));
}

.feature-card-premium h3 {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
}

.feature-card-premium p {
  color: rgba(255, 255, 255, 0.8);
}

.feature-card-premium .feature-highlights li {
  color: rgba(255, 255, 255, 0.9);
}

.feature-card-premium .feature-highlights li::before {
  color: var(--app-accent, #818cf8);
  text-shadow: 0 0 8px rgba(129, 140, 248, 0.6);
}

.feature-card-premium:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(129, 140, 248, 0.35);
  border-color: #d4b886;
}

.feature-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-highlights li::before {
  content: '✓';
  font-weight: bold;
  font-size: 1.2rem;
}

.tips-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 0; /* ✅ Kein margin mehr nötig - padding-bottom vom content erledigt das */
  border: 2px solid rgba(129, 140, 248, 0.4);
  box-shadow: 0 8px 24px rgba(129, 140, 248, 0.15);
  position: relative;
  overflow: hidden;
}

.tips-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at bottom left, rgba(129, 140, 248, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.tips-section h3 {
  margin: 0 0 0.875rem 0;
  font-size: 1.1rem;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
  position: relative;
  z-index: 1;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(129, 140, 248, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.tip-item:hover {
  transform: translateX(6px);
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.25);
  background: rgba(255, 255, 255, 0.1);
}

.tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  color: rgba(129, 140, 248, 0.9);
  font-weight: 300;
}

.tip-item span:last-child {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  line-height: 1.4;
}

.introduction-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(129, 140, 248, 0.3);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0; /* ✅ Never collapse - footer always visible at fixed size */
  position: relative; /* ✅ Part of modal flow (not sticky) so it never overlaps */
  border-radius: 0 0 24px 24px;
  z-index: 1;
}

.introduction-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(129, 140, 248, 0.5) 50%, transparent 100%);
}

.checkbox-container label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  user-select: none;
}

.checkbox-container input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--app-accent, #818cf8);
}

.action-buttons {
  display: flex;
  flex-direction: row; /* ✅ Buttons horizontal nebeneinander */
  gap: 1rem;
  justify-content: center; /* ✅ Buttons zentrieren */
  width: 100%;
  max-width: 100%; /* ✅ Verhindert dass Container über Footer-Breite geht */
  overflow: visible; /* ✅ Buttons müssen sichtbar bleiben */
  flex-wrap: nowrap; /* ✅ KEINE Umbrüche - immer nebeneinander */
}

.action-buttons button {
  flex: 0 0 auto; /* ✅ Buttons nehmen nur ihren Content-Platz */
  width: 180px; /* ✅ Etwas schmaler damit beide nebeneinander passen */
  max-width: 100%; /* ✅ Verhindert Overflow auf sehr kleinen Screens */
}

.introduction-footer .btn-secondary,
.introduction-footer .btn-primary {
  padding: 1rem 1.5rem; /* ✅ Gleiches Padding für beide */
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.introduction-footer .btn-secondary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.introduction-footer .btn-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.5s ease;
}

.introduction-footer .btn-secondary:hover::before {
  left: 100%;
}

.introduction-footer .btn-secondary:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.15) 100%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 6px 20px rgba(255, 255, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px) scale(1.02);
  color: #ffffff;
}

/* ========== LIGHT MODE: Helles, sauberes Design ========== */
html:not(.dark-mode) {
  /* Overlay - Heller Hintergrund */
  .introduction-overlay {
    background: radial-gradient(ellipse at center, rgba(129, 140, 248, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
  }

  /* Modal Background - Weiß */
  .introduction-modal {
    background: #ffffff;
    box-shadow:
      0 30px 90px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(129, 140, 248, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }

  /* Header - Weißer Hintergrund mit goldenen Akzenten */
  .introduction-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    border-bottom: 2px solid rgba(129, 140, 248, 0.3);
  }

  .introduction-header h1 {
    background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, #b8935a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
  }

  .introduction-subtitle {
    color: rgba(129, 140, 248, 0.9);
  }

  /* Content Background */
  .introduction-content {
    background: #ffffff;
  }

  /* Feature Cards - Helle Karten mit Schatten */
  .feature-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 2px solid rgba(129, 140, 248, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .feature-card::before {
    background: radial-gradient(circle at top right, rgba(129, 140, 248, 0.06) 0%, transparent 50%);
  }

  .feature-card:hover {
    border-color: rgba(129, 140, 248, 0.4);
    box-shadow: 0 16px 40px rgba(129, 140, 248, 0.15);
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  }

  .feature-card h3 {
    color: #1a202c;
    text-shadow: none;
  }

  .feature-card p {
    color: #4a5568;
  }

  .feature-highlights li {
    color: #2d3748;
  }

  .feature-highlights li::before {
    color: var(--app-accent, #818cf8);
  }

  /* Premium Card - Golden */
  .feature-card-premium {
    background: linear-gradient(135deg, #fffbf5 0%, #fff7ed 100%);
    border: 2px solid var(--app-accent, #818cf8);
    box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2);
  }

  .feature-card-premium:hover {
    box-shadow: 0 16px 40px rgba(129, 140, 248, 0.25);
  }

  /* Tips Section */
  .tips-section {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border: 2px solid rgba(129, 140, 248, 0.2);
  }

  .tips-section h3 {
    color: #1a202c; /* ✅ Dunkle Schrift für Light Mode */
  }

  .tip-item {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(129, 140, 248, 0.2);
  }

  .tip-icon {
    color: var(--app-accent, #818cf8);
  }

  .tip-item span:last-child {
    color: #2d3748;
  }

  /* Footer */
  .introduction-footer {
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
    border-top: 1px solid rgba(129, 140, 248, 0.2);
  }

  /* Primary Button - Golden */
  .introduction-footer .btn-primary {
    background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, #b8935a 100%);
    color: white;
    box-shadow: 0 8px 24px rgba(129, 140, 248, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.3);
  }

  .introduction-footer .btn-primary:hover {
    background: linear-gradient(135deg, #e0bc87 0%, var(--app-accent, #818cf8) 100%);
    box-shadow: 0 12px 32px rgba(129, 140, 248, 0.4);
  }

  /* Secondary Button */
  .introduction-footer .btn-secondary {
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    color: var(--app-accent, #818cf8);
    border: 2px solid rgba(129, 140, 248, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .introduction-footer .btn-secondary:hover {
    background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 6px 20px rgba(129, 140, 248, 0.2);
    color: #b8935a;
  }

  /* Close Button */
  .btn-close-modal {
    border: 2px solid rgba(129, 140, 248, 0.3);
    background: rgba(255, 255, 255, 0.95);
    color: var(--app-accent, #818cf8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .btn-close-modal:hover {
    background: var(--app-accent, #818cf8);
    color: white;
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 6px 20px rgba(129, 140, 248, 0.3);
  }

  /* Scrollbar - Helle Version */
  .introduction-content::-webkit-scrollbar-track {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.03) 0%, rgba(129, 140, 248, 0.05) 100%);
    border: 1px solid rgba(129, 140, 248, 0.1);
  }

  .introduction-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, #b8935a 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
  }

  .introduction-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #e0bc87 0%, var(--app-accent, #818cf8) 100%);
    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.5);
  }

  /* Checkbox */
  .checkbox-container label {
    color: #4a5568;
  }

  .checkbox-container input[type="checkbox"] {
    accent-color: var(--app-accent, #818cf8);
  }
}

.introduction-footer .btn-primary {
  background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, #b8935a 100%);
  color: white;
  box-shadow:
    0 8px 24px rgba(129, 140, 248, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.3);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}

.introduction-footer .btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.introduction-footer .btn-primary:hover::before {
  left: 100%;
}

.introduction-footer .btn-primary::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #d4b886 0%, var(--app-accent, #818cf8) 100%);
  border-radius: 12px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.introduction-footer .btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 32px rgba(129, 140, 248, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.introduction-footer .btn-primary:hover::after {
  opacity: 1;
}

.btn-close-modal {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(129, 140, 248, 0.3);
  background: rgba(255, 255, 255, 0.15);
  color: var(--app-accent, #818cf8);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-close-modal:hover {
  background: rgba(129, 140, 248, 0.9);
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 6px 20px rgba(129, 140, 248, 0.4);
}

/* Tablet-optimiert */
@media (max-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Kleinere Tablets */
@media (max-width: 900px) {
  .introduction-modal {
    max-width: 95%;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .tips-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet & mittlere Screens - "Geführte Tour" verstecken */
@media (max-width: 1280px) {
  .btn-primary {
    display: none !important; /* ✅ "Geführte Tour" auf Tablets versteckt */
  }

  /* ✅ Button bleibt zentriert auch wenn nur einer sichtbar ist */
  .action-buttons {
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .introduction-overlay {
    padding: 1rem;
  }

  .introduction-header {
    padding: 1rem 1rem; /* ✅ Noch kompakter */
  }

  .introduction-header h1 {
    font-size: 1.5rem;
  }

  .introduction-subtitle {
    font-size: 0.9rem;
  }

  .introduction-content {
    padding: 1rem;
    padding-bottom: 12rem; /* ✅ Noch mehr Platz auf Mobile für Footer */
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .tips-grid {
    grid-template-columns: 1fr;
  }

  .introduction-footer {
    /* ✅ Kompakter Footer - bleibt sticky */
    flex-wrap: wrap;
    gap: 0.5rem; /* ✅ Noch kleiner gap */
    padding: 0.75rem 1rem; /* ✅ Minimal padding */
    position: sticky; /* ✅ Auch auf Mobile sticky */
    bottom: 0;
  }

  .action-buttons {
    justify-content: center;
    flex-wrap: nowrap; /* ✅ Auch auf Mobile nebeneinander */
    width: 100%;
    gap: 0.75rem; /* ✅ Kleinerer Gap auf Mobile */
  }

  .action-buttons button {
    width: 150px; /* ✅ Schmaler auf Mobile, damit beide nebeneinander passen */
    max-width: 45%; /* ✅ Max 45% der Breite, damit beide Platz haben */
    padding: 0.875rem 1rem; /* ✅ Kompakteres Padding auf Mobile */
    font-size: 0.9rem; /* ✅ Etwas kleinere Schrift auf Mobile */
  }
}

/* ========== DARK MODE: Dunkelblaue Elemente ========== */
html.dark-mode {
  /* Overlay - Dunkler Hintergrund */
  .introduction-overlay {
    background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.15) 0%, rgba(0, 0, 0, 0.85) 100%);
  }

  /* Modal Background - Dunkel */
  .introduction-modal {
    background: #1a1a2e;
  }

  /* Header - Dunkelblauer Gradient */
  .introduction-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
    color: white;
  }

  .introduction-header h1 {
    background: linear-gradient(135deg, #ffffff 0%, var(--app-accent, #818cf8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 20px rgba(129, 140, 248, 0.5);
  }

  .introduction-subtitle {
    color: rgba(129, 140, 248, 0.9);
  }

  /* Content - Dunkel */
  .introduction-content {
    background: #1a1a2e;
  }

  /* Feature Cards - Dunkelblaue Karten */
  .feature-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(102, 126, 234, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  .feature-card::before {
    background: radial-gradient(circle at top right, rgba(102, 126, 234, 0.1) 0%, transparent 50%);
  }

  .feature-card:hover {
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 16px 40px rgba(102, 126, 234, 0.2);
    background: linear-gradient(135deg, #16213e 0%, #1a2847 100%);
  }

  .feature-card h3 {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
  }

  .feature-card p {
    color: rgba(255, 255, 255, 0.8);
  }

  .feature-highlights li {
    color: rgba(255, 255, 255, 0.9);
  }

  .feature-highlights li::before {
    color: #667eea;
  }

  /* Premium Card - Golden im Dark Mode */
  .feature-card-premium {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid var(--app-accent, #818cf8);
  }

  /* Tips Section */
  .tips-section {
    background: linear-gradient(135deg, #16213e 0%, #1a2847 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
  }

  .tip-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.3);
  }

  .tip-icon {
    color: #667eea;
  }

  .tip-item span:last-child {
    color: rgba(255, 255, 255, 0.9);
  }

  /* Footer - Dunkel */
  .introduction-footer {
    background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
    border-top: 1px solid rgba(102, 126, 234, 0.3);
  }

  /* Primary Button - Golden */
  .introduction-footer .btn-primary {
    background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, #b8935a 100%) !important;
    color: white !important;
    box-shadow:
      0 8px 24px rgba(129, 140, 248, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
  }

  .introduction-footer .btn-primary:hover {
    background: linear-gradient(135deg, #e0bc87 0%, var(--app-accent, #818cf8) 100%) !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow:
      0 12px 32px rgba(129, 140, 248, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  }

  /* Secondary Button */
  .introduction-footer .btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }

  .introduction-footer .btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.15) 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      0 6px 20px rgba(255, 255, 255, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }

  /* Close Button */
  .btn-close-modal {
    background: rgba(255, 255, 255, 0.15);
    color: var(--app-accent, #818cf8);
    border-color: rgba(129, 140, 248, 0.3);
  }

  .btn-close-modal:hover {
    background: rgba(129, 140, 248, 0.9);
    color: white;
  }

  /* Checkbox */
  .checkbox-container label {
    color: rgba(255, 255, 255, 0.9);
  }

  .checkbox-container input[type="checkbox"] {
    accent-color: #667eea;
  }
}
.user-menu-container {
  position: relative;
}

.user-menu-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--app-card-bg, white);
  border: 1px solid var(--app-border, #e0e0e0);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--app-text-primary, #1a202c);
  font-weight: 500;
  transition: all 0.2s;
}

.user-menu-button:hover {
  background: var(--app-hover-bg, #f1f5f9);
  border-color: var(--app-accent, #667eea);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.user-menu-button.login-button {
  background: var(--app-accent, #667eea);
  color: white;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.user-menu-button.login-button:hover {
  background: var(--app-accent-hover, #5568d3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.user-icon {
  font-size: 1.2rem;
}

.user-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
}

.role-badge.superadmin,
.role-badge.admin {
  background: var(--app-accent-light, #e0e7ff);
  color: var(--app-accent, #667eea);
  border: 1px solid var(--app-accent, #667eea);
}

.role-badge.designer {
  background: var(--app-hover-bg, #f1f5f9);
  color: var(--app-text-secondary, #475569);
  border: 1px solid var(--app-border, #e2e8f0);
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: transparent;
}

.user-menu-dropdown {
  position: fixed;
  background: var(--app-card-bg, white);
  border: 1px solid var(--app-border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  min-width: 250px;
  z-index: 9999;
  overflow: hidden;
  /* Position will be calculated by JS */
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--app-hover-bg, #f1f5f9);
  border-bottom: 1px solid var(--app-border, #e2e8f0);
}

.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--app-accent, #667eea);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.25rem;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-info .user-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--app-text-primary, #1a202c);
  max-width: none;
  margin-bottom: 0.25rem;
}

.user-email {
  font-size: 0.8rem;
  color: var(--app-text-secondary, #475569);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-divider {
  height: 1px;
  background: var(--app-border, #e2e8f0);
  margin: 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: none;
  border: none;
  color: var(--app-text-primary, #1a202c);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.user-menu-item:hover {
  background: var(--app-hover-bg, #f1f5f9);
  color: var(--app-accent, #667eea);
}

.user-menu-item.logout {
  color: #ff6b6b;
}

.user-menu-item.logout:hover {
  background: rgba(255, 107, 107, 0.1);
}

.user-menu-item span {
  font-size: 1.1rem;
}

/* ========== DARK MODE ========== */
.dark-mode .user-menu-button {
  background: var(--app-card-bg, #1e293b);
  border-color: var(--app-border, #334155);
  color: var(--app-text-primary, #f8fafc);
}

.dark-mode .user-menu-button:hover {
  background: var(--app-hover-bg, #2d3a4f);
  border-color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.2);
}

.dark-mode .user-menu-button.login-button {
  background: var(--app-accent, #818cf8);
  border-color: transparent;
  color: white;
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
}

.dark-mode .user-menu-button.login-button:hover {
  background: #6366f1;
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.4);
}

.dark-mode .user-menu-dropdown {
  background: var(--app-card-bg, #1e293b);
  border-color: var(--app-border, #334155);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.dark-mode .user-menu-header {
  background: var(--app-hover-bg, #2d3a4f);
  border-bottom-color: var(--app-border, #334155);
}

.dark-mode .user-avatar {
  background: var(--app-accent, #818cf8);
  color: white;
  box-shadow: 0 2px 4px rgba(129, 140, 248, 0.3);
}

.dark-mode .user-info .user-name {
  color: var(--app-text-primary, #f8fafc);
}

.dark-mode .user-email {
  color: var(--app-text-secondary, #cbd5e1);
}

.dark-mode .user-menu-divider {
  background: var(--app-border, #334155);
}

.dark-mode .user-menu-item {
  color: var(--app-text-primary, #f8fafc);
}

.dark-mode .user-menu-item:hover {
  background: var(--app-hover-bg, #2d3a4f);
  color: var(--app-accent, #818cf8);
}

.dark-mode .user-menu-item.logout {
  color: #ff8585;
}

.dark-mode .user-menu-item.logout:hover {
  background: rgba(255, 107, 107, 0.15);
  color: #ff9999;
}

.dark-mode .role-badge.superadmin,
.dark-mode .role-badge.admin {
  background: rgba(129, 140, 248, 0.2);
  color: var(--app-accent, #818cf8);
  border-color: var(--app-accent, #818cf8);
}

.dark-mode .role-badge.designer {
  background: var(--app-hover-bg, #2d3a4f);
  color: var(--app-text-secondary, #cbd5e1);
  border-color: var(--app-border, #334155);
}
/**
 * Responsive Report Button Styles
 * Professional, minimal design matching the header
 */

/* Button Container */
.responsive-report-buttons {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.responsive-report-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--app-card-bg, #ffffff);
  border: 1.5px solid var(--app-border, rgba(0, 0, 0, 0.1));
  border-radius: 6px;
  color: var(--app-text, #1e293b);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.responsive-report-btn:hover:not(:disabled) {
  background: var(--app-hover-bg, #f8fafc);
  border-color: var(--app-accent, #818cf8);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.responsive-report-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.responsive-report-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Copied State */
.responsive-report-btn.copied {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.responsive-report-btn.copied:hover {
  background: #059669;
  border-color: #059669;
}

/* Active State (for visual button) */
.responsive-report-btn.visual-btn.active {
  background: #eef2ff;
  border-color: var(--app-accent, #818cf8);
  color: var(--app-accent, #818cf8);
}

/* Generating State */
.responsive-report-btn.generating svg {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Icon */
.responsive-report-btn svg {
  flex-shrink: 0;
}

/* Visual Overlay */
.responsive-visual-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9998;
}

.overlay-box {
  transition: opacity 0.2s ease;
}

.overlay-label {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dark Mode */
.dark-mode .responsive-report-btn {
  background: var(--app-card-bg, rgba(30, 41, 59, 0.95));
  border-color: var(--app-border, rgba(148, 163, 184, 0.2));
  color: var(--app-text, #e2e8f0);
}

.dark-mode .responsive-report-btn:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.95);
  border-color: var(--app-accent, #818cf8);
}

.dark-mode .responsive-report-btn.copied {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.dark-mode .responsive-report-btn.visual-btn.active {
  background: rgba(129, 140, 248, 0.2);
  border-color: var(--app-accent, #818cf8);
  color: var(--app-accent, #818cf8);
}

/* Responsive */
@media (max-width: 768px) {
  .responsive-report-btn span {
    display: none;
  }

  .responsive-report-btn {
    padding: 8px;
    min-width: 36px;
    justify-content: center;
  }

  .responsive-report-buttons {
    gap: 0.25rem;
  }
}
/* Toast Container */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  pointer-events: none;
}

/* Toast Base */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: all;
  min-width: 300px;
  max-width: 420px;
  border-left: 4px solid #ccc;
  animation: slideIn 0.3s ease-out;
}

.toast-exit {
  animation: slideOut 0.3s ease-in forwards;
}

/* Toast Types */
.toast-success {
  border-left-color: #10b981;
}

.toast-error {
  border-left-color: #ef4444;
}

.toast-warning {
  border-left-color: #f59e0b;
}

.toast-info {
  border-left-color: #3b82f6;
}

/* Toast Icon */
.toast-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

/* Toast Content */
.toast-content {
  flex: 1;
  color: #374151;
  font-size: 14px;
  line-height: 1.5;
}

.toast-content p {
  margin: 0;
}

.toast-content strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: #111827;
}

.toast-content ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.toast-content li {
  margin: 4px 0;
}

/* Toast Close Button */
.toast-close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.2s;
}

.toast-close:hover {
  color: #374151;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .toast {
    min-width: auto;
    max-width: none;
  }
}
/**
 * Elegante Guided Tour Styles
 * Zeitloses Design mit Gold-Akzenten
 */

/* Root Container - Full Screen */
.tour-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  pointer-events: none;
}

/* SVG Overlay für Spotlight-Effekt */
.tour-overlay-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* Spotlight-Animation */
.spotlight-animating {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glow-Ring um hervorgehobenes Element */
.tour-highlight-ring {
  position: absolute;
  border: 3px solid var(--app-accent, #818cf8);
  border-radius: 12px;
  box-shadow:
    0 0 0 4px rgba(129, 140, 248, 0.3),
    0 0 30px rgba(129, 140, 248, 0.4),
    0 0 60px rgba(129, 140, 248, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: pulse-ring 2s ease-in-out infinite;
}

.tour-highlight-ring.animating {
  opacity: 0;
  transform: scale(0.95);
}

@keyframes pulse-ring {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(129, 140, 248, 0.3),
      0 0 30px rgba(129, 140, 248, 0.4),
      0 0 60px rgba(129, 140, 248, 0.2),
      inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(129, 140, 248, 0.4),
      0 0 40px rgba(129, 140, 248, 0.5),
      0 0 80px rgba(129, 140, 248, 0.3),
      inset 0 0 25px rgba(255, 255, 255, 0.15);
  }
}

/* Popover Box - Dynamisch positioniert (Position wird per inline-style gesetzt) */
.tour-popover {
  /* position, top, left werden inline per JavaScript gesetzt */
  width: 90%;
  max-width: 440px;
  background: linear-gradient(145deg, #1c1c1c 0%, #262626 100%);
  border: 1px solid rgba(129, 140, 248, 0.4);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 40px rgba(129, 140, 248, 0.15);
  pointer-events: auto;
  /* Smooth transition für Positionswechsel - KEINE Pop-up Animation mehr */
}

/* Close Button */
.tour-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tour-close-btn:hover {
  background: rgba(129, 140, 248, 0.15);
  border-color: rgba(129, 140, 248, 0.4);
  color: var(--app-accent, #818cf8);
  transform: scale(1.05);
}

/* Title */
.tour-popover-title {
  padding: 20px 50px 8px 24px;
  font-size: 18px;
  font-weight: 600;
  color: var(--app-accent, #818cf8);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Description */
.tour-popover-description {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}

/* Footer */
.tour-popover-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0 0 16px 16px;
}

/* Navigation Buttons */
.tour-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Previous Button */
.tour-prev-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}

.tour-prev-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(129, 140, 248, 0.4);
  color: var(--app-accent, #818cf8);
  transform: translateX(-2px);
}

.tour-prev-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Next Button */
.tour-next-btn {
  background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, #b8935a 100%);
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}

.tour-next-btn:hover {
  background: linear-gradient(135deg, #e5c896 0%, var(--app-accent, #818cf8) 100%);
  transform: translateX(2px);
  box-shadow: 0 6px 20px rgba(129, 140, 248, 0.4);
}

/* Done Button (letzter Step) */
.tour-done-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.tour-done-btn:hover {
  background: linear-gradient(135deg, #5bc95e 0%, #4CAF50 100%);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

/* Progress Indicator */
.tour-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  min-width: 50px;
  justify-content: center;
}

.tour-progress-current {
  color: var(--app-accent, #818cf8);
  font-weight: 600;
}

.tour-progress-separator {
  color: rgba(255, 255, 255, 0.3);
}

.tour-progress-total {
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 600px) {
  .tour-popover {
    width: 94%;
    max-width: none;
    border-radius: 14px;
  }

  .tour-popover-title {
    font-size: 17px;
    padding: 18px 44px 6px 18px;
  }

  .tour-popover-description {
    font-size: 14px;
    padding: 0 18px 16px;
  }

  .tour-popover-footer {
    padding: 14px 18px;
    gap: 12px;
  }

  .tour-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .tour-close-btn {
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
  }
}

/* Für sehr kleine Bildschirme */
@media (max-width: 380px) {
  .tour-popover {
    width: 96%;
  }

  .tour-nav-btn {
    width: 40px;
    height: 40px;
  }

  .tour-progress {
    font-size: 13px;
  }
}

/* ========== LIGHT MODE: Helles, sauberes Design ========== */
html:not(.dark-mode) {
  /* Popover - Heller Hintergrund */
  .tour-popover {
    background: linear-gradient(145deg, #ffffff 0%, #f8f8f8 100%);
    border: 1px solid rgba(129, 140, 248, 0.3);
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(129, 140, 248, 0.1),
      0 0 40px rgba(129, 140, 248, 0.1);
  }

  /* Title - Goldene Farbe bleibt */
  .tour-popover-title {
    color: #b8935a;
  }

  /* Description - Dunkle Textfarbe */
  .tour-popover-description {
    color: rgba(0, 0, 0, 0.75);
  }

  /* Footer - Heller Hintergrund */
  .tour-popover-footer {
    background: rgba(129, 140, 248, 0.05);
    border-top: 1px solid rgba(129, 140, 248, 0.15);
  }

  /* Close Button */
  .tour-close-btn {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
  }

  .tour-close-btn:hover {
    background: rgba(129, 140, 248, 0.1);
    border-color: rgba(129, 140, 248, 0.4);
    color: #b8935a;
  }

  /* Previous Button */
  .tour-prev-btn {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
  }

  .tour-prev-btn:hover:not(.disabled) {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(129, 140, 248, 0.4);
    color: #b8935a;
  }

  /* Progress Indicator */
  .tour-progress-current {
    color: #b8935a;
  }

  .tour-progress-separator {
    color: rgba(0, 0, 0, 0.3);
  }

  .tour-progress-total {
    color: rgba(0, 0, 0, 0.4);
  }
}
/* ==========================================
   Toast Container - Fixed Position Top-Right
   ========================================== */

.toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

/* ==========================================
   Individual Toast Notification
   ========================================== */

.toast-notification {
  pointer-events: auto;
  min-width: 320px;
  max-width: 420px;
  background: white;
  border-radius: 12px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.07),
    0 10px 15px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  /* Slide-in animation */
  animation: toast-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: right;
}

.toast-notification.toast-exit {
  animation: toast-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(calc(100% + 2rem)) scale(0.95);
    opacity: 0;
  }
}

/* ==========================================
   Toast Content Layout
   ========================================== */

.toast-content {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  position: relative;
}

/* ==========================================
   Toast Icon Wrapper
   ========================================== */

.toast-icon-wrapper {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-icon {
  width: 100%;
  height: 100%;
}

/* ==========================================
   Toast Message
   ========================================== */

.toast-message {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--app-text-primary, #1a252f);
}

/* ==========================================
   Toast Close Button
   ========================================== */

.toast-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
  color: var(--app-text-tertiary, #9ca3af);
}

.toast-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--app-text-primary, #1a252f);
}

.toast-close:active {
  transform: scale(0.95);
}

.toast-close svg {
  width: 14px;
  height: 14px;
}

/* ==========================================
   Toast Type: Success
   ========================================== */

.toast-success {
  border-left: 4px solid #10b981;
}

.toast-success .toast-icon-wrapper {
  color: #10b981;
}

.toast-success .toast-content {
  background: linear-gradient(
    to right,
    rgba(16, 185, 129, 0.08) 0%,
    rgba(16, 185, 129, 0.02) 100%
  );
}

/* ==========================================
   Toast Type: Error
   ========================================== */

.toast-error {
  border-left: 4px solid #ef4444;
}

.toast-error .toast-icon-wrapper {
  color: #ef4444;
}

.toast-error .toast-content {
  background: linear-gradient(
    to right,
    rgba(239, 68, 68, 0.08) 0%,
    rgba(239, 68, 68, 0.02) 100%
  );
}

/* ==========================================
   Toast Type: Warning
   ========================================== */

.toast-warning {
  border-left: 4px solid #f59e0b;
}

.toast-warning .toast-icon-wrapper {
  color: #f59e0b;
}

.toast-warning .toast-content {
  background: linear-gradient(
    to right,
    rgba(245, 158, 11, 0.08) 0%,
    rgba(245, 158, 11, 0.02) 100%
  );
}

/* ==========================================
   Toast Type: Info
   ========================================== */

.toast-info {
  border-left: 4px solid #3b82f6;
}

.toast-info .toast-icon-wrapper {
  color: #3b82f6;
}

.toast-info .toast-content {
  background: linear-gradient(
    to right,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(59, 130, 246, 0.02) 100%
  );
}

/* ==========================================
   Responsive - Mobile
   ========================================== */

@media (max-width: 768px) {
  .toast-container {
    top: 1rem;
    right: 1rem;
    left: 1rem;
  }

  .toast-notification {
    min-width: auto;
    max-width: none;
    width: 100%;
  }

  @keyframes toast-slide-in {
    from {
      transform: translateY(-2rem);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes toast-slide-out {
    from {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    to {
      transform: translateY(-2rem) scale(0.95);
      opacity: 0;
    }
  }
}

/* ==========================================
   Dark Mode Support
   ========================================== */

@media (prefers-color-scheme: dark) {
  .toast-notification {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.3),
      0 10px 15px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .toast-message {
    color: rgba(248, 250, 252, 0.95);
  }

  .toast-close {
    color: rgba(203, 213, 225, 0.6);
  }

  .toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(248, 250, 252, 0.95);
  }

  .toast-success .toast-content {
    background: linear-gradient(
      to right,
      rgba(16, 185, 129, 0.15) 0%,
      rgba(16, 185, 129, 0.05) 100%
    );
  }

  .toast-error .toast-content {
    background: linear-gradient(
      to right,
      rgba(239, 68, 68, 0.15) 0%,
      rgba(239, 68, 68, 0.05) 100%
    );
  }

  .toast-warning .toast-content {
    background: linear-gradient(
      to right,
      rgba(245, 158, 11, 0.15) 0%,
      rgba(245, 158, 11, 0.05) 100%
    );
  }

  .toast-info .toast-content {
    background: linear-gradient(
      to right,
      rgba(59, 130, 246, 0.15) 0%,
      rgba(59, 130, 246, 0.05) 100%
    );
  }
}
/**
 * Custom Styling für Driver.js Tour
 * Angepasst an Lunaria Design-System
 */

/* Popover Container */
.driver-popover {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: #f0f0f0;
  border-radius: 12px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(218, 165, 32, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(218, 165, 32, 0.4);
  max-width: 420px;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Popover Pfeil */
.driver-popover.driver-popover-arrow-side-left .driver-popover-arrow,
.driver-popover.driver-popover-arrow-side-right .driver-popover-arrow,
.driver-popover.driver-popover-arrow-side-top .driver-popover-arrow,
.driver-popover.driver-popover-arrow-side-bottom .driver-popover-arrow {
  border-color: rgba(218, 165, 32, 0.4);
}

.driver-popover .driver-popover-arrow-side-left.driver-popover-arrow,
.driver-popover .driver-popover-arrow-side-right.driver-popover-arrow,
.driver-popover .driver-popover-arrow-side-top.driver-popover-arrow,
.driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Titel */
.driver-popover-title {
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.2) 0%, rgba(218, 165, 32, 0.1) 100%);
  color: #daa520;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 20px;
  margin: 0;
  border-bottom: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 12px 12px 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Beschreibung */
.driver-popover-description {
  color: #e0e0e0;
  font-size: 15px;
  line-height: 1.6;
  padding: 18px 20px;
  margin: 0;
}

/* Footer mit Buttons */
.driver-popover-footer {
  background: rgba(0, 0, 0, 0.2);
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 0 0 12px 12px;
}

/* Progress Text */
.driver-popover-progress-text {
  color: #aaa;
  font-size: 13px;
  font-weight: 500;
}

/* Button Container */
.driver-popover-footer-buttons {
  display: flex;
  gap: 10px;
}

/* Alle Buttons - GRÖSSER und MODERNER */
.driver-popover-btn {
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  outline: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  text-transform: none;
  min-width: 120px;
}

/* Previous Button - Dezent und Modern */
.driver-popover-prev-btn {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(218, 165, 32, 0.9);
  border: 2px solid rgba(218, 165, 32, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.driver-popover-prev-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(218, 165, 32, 0.7);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(218, 165, 32, 0.3);
  color: #daa520;
}

.driver-popover-prev-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(218, 165, 32, 0.2);
}

/* Next Button - Prominent und Einladend */
.driver-popover-next-btn {
  background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, #b8935a 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 6px 20px rgba(129, 140, 248, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.driver-popover-next-btn:hover {
  background: linear-gradient(135deg, #e5c896 0%, var(--app-accent, #818cf8) 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 10px 30px rgba(129, 140, 248, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
}

.driver-popover-next-btn:active {
  transform: translateY(-1px) scale(1);
  box-shadow:
    0 6px 20px rgba(129, 140, 248, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Close Button */
.driver-popover-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #daa520;
  border: 1px solid rgba(218, 165, 32, 0.3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.driver-popover-close-btn:hover {
  background: rgba(218, 165, 32, 0.2);
  border-color: rgba(218, 165, 32, 0.5);
  transform: rotate(90deg) scale(1.1);
}

/* Overlay - NOCH dunkler für maximalen Kontrast */
.driver-overlay {
  background: rgba(0, 0, 0, 0.96) !important; /* Von 0.92 auf 0.96 erhöht */
  backdrop-filter: none !important; /* Kein Blur! */
  z-index: 9999999 !important;
}

/* Stage (der hervorgehobene Bereich um das Element) - MAXIMAL HELL und ULTRA SICHTBAR */
.driver-popover-stage {
  background: rgba(255, 255, 255, 1) !important; /* 100% Weißer Hintergrund (von 0.98 auf 1) */
  border-radius: 12px;
  box-shadow:
    0 0 0 5000px rgba(0, 0, 0, 0.96), /* NOCH dunklerer Schatten (von 0.92 auf 0.96) */
    0 0 0 8px var(--app-accent, #818cf8), /* Noch dickerer Gold Border (von 6px auf 8px) */
    0 0 80px var(--app-accent, #818cf8),  /* Noch stärkerer Glow (von 60px auf 80px) */
    0 0 140px rgba(129, 140, 248, 0.8),  /* Noch mehr Glow (von 100px auf 140px) */
    inset 0 0 30px rgba(255, 255, 255, 1); /* Maximaler Inner-Glow (von 20px/0.8 auf 30px/1) */
  z-index: 10000000 !important;
  pointer-events: none;
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Pulsing-Animation mit noch mehr Intensität */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 0 5000px rgba(0, 0, 0, 0.96),
      0 0 0 8px var(--app-accent, #818cf8),
      0 0 80px var(--app-accent, #818cf8),
      0 0 140px rgba(129, 140, 248, 0.8),
      inset 0 0 30px rgba(255, 255, 255, 1);
  }
  50% {
    box-shadow:
      0 0 0 5000px rgba(0, 0, 0, 0.96),
      0 0 0 10px #e5c896, /* Von 8px auf 10px */
      0 0 100px var(--app-accent, #818cf8), /* Von 80px auf 100px */
      0 0 160px rgba(129, 140, 248, 0.9), /* Von 120px/0.8 auf 160px/0.9 */
      inset 0 0 40px rgba(255, 255, 255, 1); /* Von 30px auf 40px */
  }
}

/* Highlighted Element - MAXIMAL HELL und SICHTBAR */
.driver-active-element {
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 1), /* Noch dickere weiße Outline (von 3px/0.9 auf 4px/1) */
    0 0 30px var(--app-accent, #818cf8) !important; /* Noch stärkerer Glow (von 20px/0.8 auf 30px/1) */
  z-index: 10000001 !important; /* Über dem Stage */
  position: relative;
  background: rgba(255, 255, 255, 1) !important; /* 100% Weißer Hintergrund (von 0.95 auf 1) */
  filter: none !important; /* KEIN Blur! */
  opacity: 1 !important;
  border-radius: 8px;
}

/* Stelle sicher dass das Element und seine Kinder scharf und sichtbar sind */
.driver-active-element,
.driver-active-element * {
  filter: none !important;
  backdrop-filter: none !important;
}

/* Für Dark Mode Elemente: Überschreibe Hintergrund */

.dark-mode .driver-active-element {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a1a !important;
  }

.dark-mode .driver-active-element * {
    color: inherit !important;
  }


/* Animationen */
@keyframes driver-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.driver-popover {
  animation: driver-fade-in 0.3s ease;
}

/* Dark Mode Unterstützung */

.dark-mode .driver-popover {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    border-color: rgba(218, 165, 32, 0.5);
  }

.dark-mode .driver-popover-description {
    color: #f0f0f0;
  }


/* Responsive Anpassungen */
@media (max-width: 768px) {
  .driver-popover {
    max-width: 90vw;
    margin: 10px;
  }

  .driver-popover-title {
    font-size: 17px;
    padding: 16px 18px;
  }

  .driver-popover-description {
    font-size: 15px;
    padding: 16px 18px;
  }

  .driver-popover-footer {
    padding: 14px 18px;
    flex-direction: column;
    align-items: stretch;
  }

  .driver-popover-footer-buttons {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .driver-popover-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 28px;
    font-size: 17px;
  }

  .driver-popover-progress-text {
    text-align: center;
    margin-bottom: 12px;
    font-size: 14px;
  }
}

/* Custom Klasse für spezielle Tour-Highlights */
.lunaria-tour-popover {
  /* Zusätzliche custom styles wenn nötig */
}

/* Spezielle Styles für bestimmte Tour-Steps */
.driver-popover[data-step-index="0"] .driver-popover-title {
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.3) 0%, rgba(218, 165, 32, 0.15) 100%);
}

/* Letzter Step (Fertig-Button) */
.driver-popover:has(.driver-popover-next-btn:only-child) .driver-popover-next-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.driver-popover:has(.driver-popover-next-btn:only-child) .driver-popover-next-btn:hover {
  background: linear-gradient(135deg, #5bc95e 0%, #4CAF50 100%);
}
/* ==========================================
   New App Architecture - Tab Navigation
   ========================================== */

:root {
  /* Premium Color System - Professional & Modern */
  --app-bg: #f9fafb;  /* Lighter, cleaner background */
  --app-bg-white: #ffffff;
  --app-text-primary: #111827;  /* Sharper black for better readability */
  --app-text-secondary: #6b7280;  /* Balanced gray */
  --app-text-tertiary: #9ca3af;  /* Lighter gray for subtle text */
  --app-border: #e5e7eb;  /* Clean, modern border */
  --app-border-medium: #d1d5db;
  --app-card-bg: #ffffff;
  --app-card-gradient: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  --app-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);

  /* Modern Accent Colors - Indigo/Purple gradient (Fine-tuned for better vibrancy) */
  --app-accent: #5851e8;  /* Slightly more vibrant indigo */
  --app-accent-hover: #4a42d1;
  --app-accent-light: #eef2ff;
  --app-accent-gradient: linear-gradient(135deg, #5851e8 0%, #8f5cf6 100%);
  --app-hover-bg: #f3f4f6;

  /* Logo Filter - Schwarz im Light Mode */
  --logo-filter: brightness(0) saturate(100%);

  /* Info-Box */
  --info-box-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
  --info-box-border: rgba(79, 70, 229, 0.2);
}

/* Dark Mode - Angepasst an neues Schema */
.dark-mode {
  --app-bg: #0f172a;  /* Sehr dunkles Slate */
  --app-bg-white: #1e293b;
  --app-text-primary: #f8fafc;  /* Sehr hell für Kontrast */
  --app-text-secondary: #cbd5e1;
  --app-text-tertiary: #94a3b8;
  --app-border: #334155;
  --app-border-medium: #475569;
  --app-card-bg: #1e293b;  /* Solide Basis-Farbe */
  --app-card-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);  /* Dunkleres Gradient */
  --app-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --app-accent: #868cf8;  /* Slightly more vibrant violet for Dark Mode */
  --app-accent-light: #1e293b;
  --app-hover-bg: #2d3a4f;

  /* Logo Filter - Weiß im Dark Mode */
  --logo-filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));

  /* Info-Box Dark Mode */
  --info-box-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.12) 100%);
  --info-box-border: rgba(102, 126, 234, 0.35);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--app-bg);
  min-height: 100vh;
  color: var(--app-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main Container */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--app-bg);
}

/* Header with Tab Navigation - Modern Premium Design */
.app-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid var(--app-border);
  z-index: 100;
  position: sticky;
  top: 0;
  isolation: isolate;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode .app-header {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--app-border);
}

.dark-mode .header-brand {
  border-bottom: 1px solid var(--app-border, #334155);
}

.dark-mode .header-logo-img {
  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.4))
    drop-shadow(0 2px 4px rgba(255, 255, 255, 0.2));
  opacity: 1;
}

.dark-mode .header-logo-img:hover {
  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 0 8px rgba(129, 140, 248, 0.8))
    drop-shadow(0 2px 6px rgba(129, 140, 248, 0.4));
}

.dark-mode .header-brand h1 {
  color: var(--app-text-primary, #f8fafc);
  filter: none;
}

.dark-mode .main-tabs {
  background: transparent;
  border-bottom-color: var(--app-border);
}

.dark-mode .tab-button {
  color: var(--app-text-secondary);
}

.dark-mode .tab-button:hover {
  color: var(--app-text-primary);
  background: transparent;
}

.dark-mode .tab-button.active {
  color: var(--app-accent);
  background: transparent;
}

.dark-mode .tab-button::before {
  background: var(--app-accent);
}

.dark-mode .tab-badge {
  background: rgba(129, 140, 248, 0.15);
  color: var(--app-accent);
}

.dark-mode .tab-button.active .tab-badge {
  background: var(--app-accent);
  color: white;
}

.header-brand {
  padding: 1.25rem 2rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-brand-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

.header-logo-img {
  height: 38px;
  width: 38px;
  object-fit: contain;
  /* Dunkle Farben für Logo im Light Mode */
  filter:
    brightness(0)
    drop-shadow(0 0 6px rgba(0, 0, 0, 0.2))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.8;
  cursor: pointer;
}

.header-logo-img:hover {
  transform: scale(1.08) rotate(-5deg);
  filter:
    brightness(0)
    drop-shadow(0 0 12px rgba(102, 126, 234, 0.6))
    drop-shadow(0 0 24px rgba(102, 126, 234, 0.4));
  opacity: 1;
}

.header-brand h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, #2c3e50 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease;
}

.header-brand h1:hover {
  transform: scale(1.02);
}

.header-brand .header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-right: 5.5rem; /* Platz für Dark Mode Toggle */
}

/* Tab Navigation - Professional Design (Notion/Linear/Vercel inspired) */
.main-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid var(--app-border);
  position: relative;
  width: 100%;
}

.tab-button {
  position: relative;
  flex: 1; /* Gleichmäßige Verteilung über die Breite */
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-text-secondary);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center; /* Zentriere Inhalt */
  gap: 0.5rem;
  margin-bottom: -1px; /* Overlap border */
  letter-spacing: -0.01em;
}

.tab-button:hover {
  color: var(--app-text-primary);
  background: transparent;
}

.tab-button::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--app-accent);
  transform: scaleX(0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-button:hover::before {
  transform: scaleX(0.5);
}

.tab-button.active {
  color: var(--app-accent);
  font-weight: 600;
  background: transparent;
}

.tab-button.active::before {
  transform: scaleX(1);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: var(--app-accent-light);
  color: var(--app-accent);
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

.tab-button.active .tab-badge {
  background: var(--app-accent);
  color: white;
}

.cart-tab.has-items {
  color: #ff9800;
}

.cart-tab.has-items .cart-badge {
  background: #ff9800;
  color: white;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Main Content - LIGHT MODE */
.app-main {
  flex: 1;
  overflow-y: auto;
  background: var(--app-bg);
  position: relative;
}

.app-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(129, 140, 248, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Main Content - DARK MODE */
.dark-mode .app-main {
  background:
    radial-gradient(ellipse at top left, rgba(129, 140, 248, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #16213e 100%);
}

.dark-mode .app-main::before {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(129, 140, 248, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(102, 126, 234, 0.02) 0%, transparent 50%);
}

/* Products Start View */
.products-start-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 2rem;
}

.start-content {
  text-align: center;
  max-width: 600px;
}

.start-content h2 {
  font-size: 2rem;
  color: var(--app-text-primary);
  margin-bottom: 1rem;
}

.start-content p {
  font-size: 1.1rem;
  color: var(--app-text-secondary);
  margin-bottom: 2rem;
}

.quick-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.btn-large {
  padding: 1.25rem 2.5rem;
  font-size: 1.15rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #667eea;
  color: white;
}

/* Light Mode: Besserer Kontrast für Secondary Buttons */

:root:not(.dark-mode) .btn-secondary {
    background: #f5f5f5;
    color: #2d3748;
    border: 2px solid #d0d0d0;
  }

:root:not(.dark-mode) .btn-secondary:hover {
    background: #e0e0e0;
    color: #1a202c;
    border-color: #a0aec0;
  }


.recent-designs-hint {
  padding: 1.5rem;
  background: var(--app-hover-bg);
  border-radius: 12px;
  margin-top: 2rem;
}

.hint-text {
  color: var(--app-text-secondary);
  font-size: 1rem;
}

.hint-text strong {
  color: var(--app-accent);
}

/* Cart View */
.cart-view {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.cart-header {
  margin-bottom: 2rem;
}

.cart-header h2 {
  font-size: 2rem;
  color: var(--app-text-primary);
  margin-bottom: 0.5rem;
}

.cart-count {
  color: var(--app-text-secondary);
  font-size: 1.05rem;
}

/* Empty Cart */
.empty-cart {
  text-align: center;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-cart .empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.empty-cart h3 {
  font-size: 1.5rem;
  color: var(--app-text-primary);
  margin-bottom: 0.5rem;
}

.empty-cart p {
  color: var(--app-text-secondary);
  margin-bottom: 2rem;
}

.empty-cart .btn-primary {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
}

/* Cart Items */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  background: var(--app-card-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--app-card-shadow);
}

.item-preview {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--app-hover-bg);
  flex-shrink: 0;
}

.item-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
}

.item-info h4 {
  margin: 0 0 0.5rem 0;
  color: var(--app-text-primary);
  font-size: 1.15rem;
}

.item-details {
  color: var(--app-text-secondary);
  font-size: 0.95rem;
}

.btn-remove {
  padding: 0.5rem 1rem;
  background: #ffebee;
  color: #e74c3c;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.2s;
}

.btn-remove:hover {
  background: #e74c3c;
  color: white;
}

.cart-actions {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--app-border);
}

.btn-checkout {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
}

.btn-checkout:hover {
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
}

/* Footer - LIGHT MODE */
.app-footer {
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-top: 1px solid var(--app-border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 5;
}

.footer-stats {
  display: flex;
  gap: 2rem;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--app-text-secondary);
  font-weight: 500;
}

.footer-stats span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(102, 126, 234, 0.08);
  border-radius: 20px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  color: var(--app-text-primary);
}

.footer-stats span:hover {
  background: rgba(102, 126, 234, 0.12);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

/* Footer - DARK MODE */
.dark-mode .app-footer {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-top: 1px solid rgba(129, 140, 248, 0.2);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.dark-mode .footer-stats {
  color: rgba(129, 140, 248, 0.8);
}

.dark-mode .footer-stats span {
  background: rgba(129, 140, 248, 0.1);
  border: 1px solid rgba(129, 140, 248, 0.2);
  color: rgba(129, 140, 248, 0.9);
}

.dark-mode .footer-stats span:hover {
  background: rgba(129, 140, 248, 0.15);
  border-color: rgba(129, 140, 248, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .header-logo-img {
    height: 35px;
  }

  .header-brand h1 {
    font-size: 1.3rem;
  }

  .main-tabs {
    overflow-x: auto;
    padding: 0 1rem;
  }

  .tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .quick-actions {
    flex-direction: column;
  }

  .btn-large {
    width: 100%;
  }

  .cart-item {
    flex-direction: column;
    text-align: center;
  }

  .cart-actions {
    flex-direction: column;
  }

  .footer-stats {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }
}

/* Button Utilities */
.btn-block {
  width: 100%;
}

button {
  font-family: inherit;
}

button:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--app-text-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--app-text-secondary);
}

/* Admin Button */
.header-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-back-to-shop {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  border: 2px solid rgba(102, 126, 234, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}

.btn-back-to-shop:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.5);
}

.btn-back-to-shop:active {
  transform: translateY(0) scale(1);
}

.dark-mode .btn-back-to-shop {
  background: rgba(0, 0, 0, 0.3);
  color: var(--app-accent, #818cf8);
  border: 2px solid rgba(129, 140, 248, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-back-to-shop:hover {
  box-shadow: 0 6px 16px rgba(129, 140, 248, 0.5);
  background: rgba(129, 140, 248, 0.2);
  border-color: rgba(129, 140, 248, 0.6);
}

.btn-help {
  background: var(--app-card-bg, #ffffff);
  color: var(--app-text-secondary, #475569);
  border: 1.5px solid var(--app-border, #e2e8f0);
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-help:hover {
  background: var(--app-hover-bg, #f1f5f9);
  border-color: var(--app-accent, #667eea);
  color: var(--app-accent, #667eea);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.15);
}

.btn-help:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-mode .btn-help {
  background: var(--app-card-bg, #1e293b);
  color: var(--app-text-secondary, #cbd5e1);
  border-color: var(--app-border, #334155);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-help:hover {
  background: var(--app-hover-bg, #2d3a4f);
  border-color: var(--app-accent, #818cf8);
  color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 6px rgba(129, 140, 248, 0.2);
}

.btn-admin {
  background: var(--app-card-bg, #ffffff);
  color: var(--app-text-secondary, #475569);
  border: 1.5px solid var(--app-border, #e2e8f0);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-admin:hover {
  background: var(--app-hover-bg, #f1f5f9);
  border-color: var(--app-accent, #667eea);
  color: var(--app-accent, #667eea);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.15);
}

/* Exit User View Button - Distinct but minimal styling */
.btn-admin-exit-user-view {
  background: var(--app-accent-light, #e0e7ff);
  color: var(--app-accent, #667eea);
  border: 1.5px solid var(--app-accent, #667eea);
  font-weight: 600;
  gap: 0.5rem;
}

.btn-admin-exit-user-view:hover {
  background: var(--app-accent, #667eea);
  color: white;
  border-color: var(--app-accent, #667eea);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.btn-admin:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-mode .btn-admin {
  background: var(--app-card-bg, #1e293b);
  color: var(--app-text-secondary, #cbd5e1);
  border-color: var(--app-border, #334155);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-admin:hover {
  background: var(--app-hover-bg, #2d3a4f);
  border-color: var(--app-accent, #818cf8);
  color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 6px rgba(129, 140, 248, 0.2);
}

/* Dark mode adjustments for exit button */
.dark-mode .btn-admin-exit-user-view {
  background: rgba(129, 140, 248, 0.2);
  color: var(--app-accent, #818cf8);
  border-color: var(--app-accent, #818cf8);
}

.dark-mode .btn-admin-exit-user-view:hover {
  background: var(--app-accent, #818cf8);
  color: white;
  border-color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
}

.btn-shortcuts {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  border: 2px solid rgba(102, 126, 234, 0.3);
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-shortcuts:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.5);
}

.btn-shortcuts:active {
  transform: translateY(0) scale(1);
}

.dark-mode .btn-shortcuts {
  background: rgba(0, 0, 0, 0.3);
  color: var(--app-accent, #818cf8);
  border: 2px solid rgba(129, 140, 248, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-shortcuts:hover {
  box-shadow: 0 6px 16px rgba(129, 140, 248, 0.5);
  background: rgba(129, 140, 248, 0.2);
  border-color: rgba(129, 140, 248, 0.6);
}

/* Button Styles - Dark Mode */
.dark-mode .btn-primary {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.3) 0%, rgba(129, 140, 248, 0.2) 100%);
  color: var(--app-accent, #818cf8);
  border: 2px solid rgba(129, 140, 248, 0.5);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.2);
}

.dark-mode .btn-primary:hover {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.4) 0%, rgba(129, 140, 248, 0.3) 100%);
  border-color: rgba(129, 140, 248, 0.7);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
  transform: translateY(-2px);
}

.dark-mode .btn-secondary {
  background: rgba(26, 26, 46, 0.8);
  color: rgba(129, 140, 248, 0.95);
  border: 2px solid rgba(129, 140, 248, 0.4);
}

.dark-mode .btn-secondary:hover {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.25) 0%, rgba(129, 140, 248, 0.15) 100%);
  color: var(--app-accent, #818cf8);
  border-color: rgba(129, 140, 248, 0.6);
}

/* Shortcuts Modal */
.shortcuts-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 2rem;
  animation: fadeIn 0.3s ease;
}

.shortcuts-modal {
  background: #1a1a2e;
  border-radius: 24px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(129, 140, 248, 0.2);
  max-width: 700px;
  width: 90%;
  max-height: 85vh;
  overflow: hidden;
  animation: slideUp 0.4s ease;
}

.shortcuts-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
  padding: 1.5rem 2rem;
  border-bottom: 2px solid rgba(129, 140, 248, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shortcuts-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 0%, var(--app-accent, #818cf8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-close-shortcuts {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(129, 140, 248, 0.3);
  color: var(--app-accent, #818cf8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close-shortcuts:hover {
  background: rgba(129, 140, 248, 0.3);
  border-color: var(--app-accent, #818cf8);
  transform: rotate(90deg);
}

.shortcuts-content {
  padding: 2rem;
  max-height: calc(85vh - 80px);
  overflow-y: auto;
}

.shortcuts-section {
  margin-bottom: 2rem;
}

.shortcuts-section:last-child {
  margin-bottom: 0;
}

.shortcuts-section h3 {
  color: var(--app-accent, #818cf8);
  font-size: 1.1rem;
  margin: 0 0 1rem 0;
  font-weight: 600;
}

.shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.shortcut-item:hover {
  background: rgba(129, 140, 248, 0.1);
  border-color: rgba(129, 140, 248, 0.4);
}

.shortcut-item kbd {
  background: linear-gradient(135deg, #2a2a3e 0%, #1f1f2e 100%);
  border: 2px solid rgba(129, 140, 248, 0.3);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  min-width: 3rem;
  text-align: center;
}

.shortcut-item span {
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}

.shortcut-coming-soon .shortcut-item {
  opacity: 0.6;
}

.shortcut-coming-soon .shortcut-item kbd {
  border-color: rgba(150, 150, 150, 0.3);
  color: #999;
}

.shortcut-coming-soon .shortcut-item span {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Dark Mode Button Styles for Admin Panel */
.dark-mode .btn-primary {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.9) 0%, rgba(129, 140, 248, 0.7) 100%);
  color: #1a1a2e;
  border: 2px solid rgba(129, 140, 248, 0.4);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}

.dark-mode .btn-primary:hover {
  background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, rgba(129, 140, 248, 0.8) 100%);
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 6px 16px rgba(129, 140, 248, 0.5);
  transform: translateY(-2px);
}

.dark-mode .btn-secondary {
  background: rgba(129, 140, 248, 0.1);
  color: rgba(129, 140, 248, 0.9);
  border: 2px solid rgba(129, 140, 248, 0.3);
  font-weight: 600;
}

.dark-mode .btn-secondary:hover {
  background: rgba(129, 140, 248, 0.2);
  border-color: rgba(129, 140, 248, 0.5);
  color: var(--app-accent, #818cf8);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}
/**
 * Editor Panels CSS - Shared styles for element editors
 * Used by: TextEditorPanel, QRCodePanel, ImagePanel, PatternPanel
 */

/* Panel Container */
.editor-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--app-card-bg, white);
  color: var(--app-text, #1a1a1a);
}

.editor-header {
  padding: 1rem 1.5rem;
  border-bottom: 2px solid var(--app-border, #e0e0e0);
  background: var(--app-hover-bg, #f8f9fa);
}

.editor-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text, #1a1a1a);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* Control Groups */
.control-group {
  margin-bottom: 1.5rem;
}

.control-group:last-child {
  margin-bottom: 0;
}

.control-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--app-text, #1a1a1a);
}

.control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.label-text {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--app-text, #1a1a1a);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.value-display {
  font-size: 0.85rem;
  color: var(--app-text-secondary, #666);
  font-weight: 500;
}

/* Inputs */
.text-input,
.text-textarea,
.select-input {
  width: 100%;
  padding: 0.6rem;
  border: 2px solid var(--app-border-medium, #e0e0e0);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--app-card-bg, white);
  color: var(--app-text, #1a1a1a);
  transition: border-color 0.2s;
}

.text-input:focus,
.text-textarea:focus,
.select-input:focus {
  outline: none;
  border-color: #667eea;
}

.text-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Range Sliders */
input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--app-border, #e0e0e0);
  outline: none;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Checkbox */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: normal !important;
  margin-bottom: 0 !important;
}

.checkbox-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Button Group (Alignment buttons) */
.button-group {
  display: flex;
  gap: 0.5rem;
}

.btn-group {
  flex: 1;
  padding: 0.6rem;
  border: 2px solid var(--app-border-medium, #e0e0e0);
  background: var(--app-card-bg, white);
  color: var(--app-text, #1a1a1a);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.2s;
}

.btn-group:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.btn-group.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
}

/* Delete Button */
.btn-delete {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
}

/* Info Note */
.info-note {
  background: rgba(102, 126, 234, 0.1);
  border-left: 4px solid #667eea;
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
}

.info-note p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--app-text, #1a1a1a);
  line-height: 1.5;
}

/* Tooltip */
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--app-border-medium, #e0e0e0);
  color: var(--app-text-secondary, #666);
  font-size: 0.7rem;
  font-weight: bold;
  cursor: help;
  position: relative;
  margin-left: 0.25rem;
}

.tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: normal;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1000;
}

.tooltip-icon:hover .tooltip-bubble {
  opacity: 1;
}

.tooltip-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

/* Dark Mode */
[data-theme="dark"] .editor-panel,
.dark-mode .editor-panel {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
  color: rgba(129, 140, 248, 0.95);
}

[data-theme="dark"] .editor-header,
.dark-mode .editor-header {
  background: rgba(129, 140, 248, 0.05);
  border-bottom-color: rgba(129, 140, 248, 0.2);
}

[data-theme="dark"] .editor-header h3,
.dark-mode .editor-header h3 {
  color: rgba(129, 140, 248, 0.95);
}

[data-theme="dark"] .label-text,
[data-theme="dark"] .control-group label,
.dark-mode .label-text,
.dark-mode .control-group label {
  color: rgba(129, 140, 248, 0.9);
}

[data-theme="dark"] .value-display,
.dark-mode .value-display {
  color: rgba(129, 140, 248, 0.7);
}

[data-theme="dark"] .text-input,
[data-theme="dark"] .text-textarea,
[data-theme="dark"] .select-input,
.dark-mode .text-input,
.dark-mode .text-textarea,
.dark-mode .select-input {
  background: rgba(129, 140, 248, 0.05);
  border-color: rgba(129, 140, 248, 0.2);
  color: rgba(129, 140, 248, 0.95);
}

[data-theme="dark"] .text-input:focus,
[data-theme="dark"] .text-textarea:focus,
[data-theme="dark"] .select-input:focus,
.dark-mode .text-input:focus,
.dark-mode .text-textarea:focus,
.dark-mode .select-input:focus {
  border-color: rgba(129, 140, 248, 0.6);
}

[data-theme="dark"] input[type="range"],
.dark-mode input[type="range"] {
  background: rgba(129, 140, 248, 0.2);
}

[data-theme="dark"] .btn-group,
.dark-mode .btn-group {
  background: rgba(129, 140, 248, 0.05);
  border-color: rgba(129, 140, 248, 0.2);
  color: rgba(129, 140, 248, 0.9);
}

[data-theme="dark"] .btn-group:hover,
.dark-mode .btn-group:hover {
  border-color: rgba(129, 140, 248, 0.6);
  background: rgba(129, 140, 248, 0.15);
}

[data-theme="dark"] .btn-group.active,
.dark-mode .btn-group.active {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.3) 0%, rgba(129, 140, 248, 0.2) 100%);
  border-color: rgba(129, 140, 248, 0.6);
  color: var(--app-accent, #818cf8);
}

[data-theme="dark"] .info-note,
.dark-mode .info-note {
  background: rgba(129, 140, 248, 0.1);
  border-left-color: rgba(129, 140, 248, 0.6);
}

[data-theme="dark"] .info-note p,
.dark-mode .info-note p {
  color: rgba(129, 140, 248, 0.9);
}

[data-theme="dark"] .tooltip-icon,
.dark-mode .tooltip-icon {
  background: rgba(129, 140, 248, 0.2);
  color: rgba(129, 140, 248, 0.9);
}
/* Ampel-Warnungs-Tag */
.warning-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.75rem;
  margin-bottom: 0;
  border: 2px solid;
  transition: all 0.2s ease;
  width: 100% !important; /* Force full width */
  clear: both;
  flex-wrap: wrap;
  position: relative;
  float: none !important; /* Kein Float erlaubt */
}

.warning-tag-icon {
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.warning-tag-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.warning-tag-message {
  flex: 1;
  line-height: 1.3;
}

/* Grün - OK */
.warning-tag-ok {
  background: rgba(76, 175, 80, 0.1);
  border-color: #4CAF50;
  color: #2E7D32;
}

.warning-tag-ok .warning-tag-icon,
.warning-tag-ok .warning-tag-label {
  color: #2E7D32;
}

/* Gelb - Warnung */
.warning-tag-warning {
  background: rgba(255, 193, 7, 0.15);
  border-color: #FFC107;
  color: #F57C00;
}

.warning-tag-warning .warning-tag-icon,
.warning-tag-warning .warning-tag-label {
  color: #F57C00;
}

/* Rot - Kritisch */
.warning-tag-critical {
  background: rgba(244, 67, 54, 0.1);
  border-color: #F44336;
  color: #C62828;
}

.warning-tag-critical .warning-tag-icon,
.warning-tag-critical .warning-tag-label {
  color: #C62828;
}

/* Hover-Effekte */
.warning-tag-ok:hover {
  background: rgba(76, 175, 80, 0.15);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
}

.warning-tag-warning:hover {
  background: rgba(255, 193, 7, 0.2);
  box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
}

.warning-tag-critical:hover {
  background: rgba(244, 67, 54, 0.15);
  box-shadow: 0 2px 6px rgba(244, 67, 54, 0.3);
}
/* ==========================================
   Product Placement Component
   PROFESSIONAL LAYOUT SYSTEM
   Based on Figma/Excalidraw patterns
   ========================================== */

/* ========================================
   CSS Custom Properties - Dynamic Layout
   ======================================== */
:root {
  --layout-header-height: 60px;
  --layout-banner-height: 64px;
  --layout-total-top-offset: calc(var(--layout-header-height) + var(--layout-banner-height));

  /* Panel Widths - User can customize */
  --panel-left-width: 300px;
  --panel-left-min: 240px;
  --panel-left-max: 400px;

  --panel-right-width: 360px;
  --panel-right-min: 280px;
  --panel-right-max: 480px;

  /* Gaps & Spacing */
  --layout-gap: 1rem;
  --panel-padding: 1rem;

  /* Performance */
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-duration: 0.25s;

  /* Z-Index Management */
  --z-header: 100;
  --z-banner: 90;
  --z-overlay: 80;
  --z-modal: 70;
  --z-panel: 10;
  --z-canvas: 1;

  /* Scrollbar Styling - Professional */
  --scrollbar-track: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb: rgba(129, 140, 248, 0.3);
  --scrollbar-thumb-hover: rgba(129, 140, 248, 0.5);
  --scrollbar-thumb-active: rgba(129, 140, 248, 0.7);
  --scrollbar-width: 8px;

  /* Focus States - Accessibility */
  --focus-ring: 2px solid rgba(129, 140, 248, 0.6);
  --focus-ring-offset: 2px;
}

.product-placement {
  width: 100%;
  min-height: 100vh;
  padding: 0; /* FIXED: Kein padding, damit Banner direkt am Header anliegt */
  margin: 0;
  position: relative;
  z-index: 1;
  /* Performance optimization */
  will-change: auto;
  contain: layout style paint;
}

/* Design Editor Container - kein Padding/Margin für direkten Anschluss an Header */
.product-placement-page {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ==========================================
   Projekt-Name Banner (neu)
   ========================================== */

.project-name-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem 2rem;
  margin-top: 0;
  margin-bottom: 0; /* Kein margin - wird durch workspace padding kompensiert */
  border-radius: 0; /* Kein Radius für besseren Anschluss */
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem; /* Reduziert von 2rem für Preis-Display */
  /* Sticky positioning - bleibt beim Scrollen sichtbar */
  position: sticky;
  top: 0; /* FIXED: Direkt unter dem sticky Header, kein zusätzlicher Abstand */
  z-index: 90; /* Unterhalb des Headers (100), aber über Content */
  backdrop-filter: blur(10px);
}

/* ==========================================
   Price Display - Premium Badge Style
   ========================================== */

.banner-price-display {
  background: rgba(255, 255, 255, 0.95);
  padding: 0.75rem 1.625rem;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 150px;
  white-space: nowrap;

  /* Refined border */
  border: 1.5px solid rgba(255, 255, 255, 0.4);

  /* Layered shadows */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);

  /* Smooth transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.banner-price-display:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.6);

  /* Enhanced shadows */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

.banner-price-display:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.banner-price-display .price-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.9;
}

.banner-price-display .price-amount {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* MODERNIZED SAVE BAR - Neue Struktur */
.banner-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0; /* Allow flex shrinking */
}

/* Project Name Content - GANZ LINKS */
.project-name-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 350px;
  margin-right: 0.5rem;
}

/* Visual separator AFTER project name */
.banner-left > .btn-banner-primary {
  position: relative;
  margin-left: 0.75rem;
}

.banner-left > .btn-banner-primary::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
}

/* Button Group 1: Speichern & Sequenzierung - Tight spacing */
.banner-left > .btn-banner-primary + .btn-banner-secondary {
  margin-left: 0.5rem;
}

/* Button Group 2: Vorlagen & Sondermaße - Visual separator */
.banner-left > .btn-banner-secondary:nth-of-type(2) {
  position: relative;
  margin-left: 1.25rem;
}

.banner-left > .btn-banner-secondary:nth-of-type(2)::before {
  content: '';
  position: absolute;
  left: -0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
}

/* Button Group 2: Tight spacing between Vorlagen & Sondermaße */
.banner-left > .btn-banner-secondary:nth-of-type(3) {
  margin-left: 0.5rem;
}

/* Button Group 3: Produkt ändern - Separate with more spacing */
.banner-left > .btn-banner-secondary:nth-of-type(4) {
  position: relative;
  margin-left: 1.25rem;
}

.banner-left > .btn-banner-secondary:nth-of-type(4)::before {
  content: '';
  position: absolute;
  left: -0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
}

/* Responsive: "Produkt ändern" button visibility */
@media (min-width: 1200px) {
  .banner-left .btn-banner-secondary[title="Produkt wechseln"] {
    display: none;
  }
}

@media (max-width: 1199px) {
  .banner-left .btn-banner-secondary[title="Produkt wechseln"] {
    display: flex;
  }
}

.project-name-content label {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.project-name-input-large {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #1a252f;
  transition: all 0.2s ease;
}

.project-name-input-large:focus {
  outline: none;
  border-color: white;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
  background: white;
}

.project-name-input-large::placeholder {
  color: #999;
}

.unsaved-indicator-left {
  color: #ff4757;
  font-size: 1.5rem;
  animation: pulse 2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255, 71, 87, 0.6);
}

/* ==========================================
   Back Button - Premium Icon Button
   ========================================== */

.btn-back-integrated {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 0.5rem;
  flex-shrink: 0;

  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Layered shadows */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05);

  /* Smooth transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-back-integrated:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px) scale(1.05);

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.btn-back-integrated:active {
  transform: translateY(0) scale(0.95);
  transition-duration: 50ms;
}

.btn-back-integrated:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

.banner-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}

/* Visual grouping for template buttons */
.banner-actions .btn-banner-template {
  margin-right: 0.25rem;
}

/* Separator between template selection and admin template controls */
.banner-actions > div[style*="display: flex"] {
  position: relative;
  padding-left: 0.75rem;
}

.banner-actions > div[style*="display: flex"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.25);
}

/* ==========================================
   Banner Buttons - Figma/Linear Premium
   ========================================== */

.btn-banner-secondary,
.btn-banner-primary {
  padding: 0.875rem 1.625rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  border: none;

  /* Multi-property transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.01em;
}

.btn-banner-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Subtle shadow */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.btn-banner-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px) scale(1.01);

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.btn-banner-secondary:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.btn-banner-primary {
  background: white;
  color: #818cf8;

  /* Layered shadows */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

.btn-banner-primary:hover {
  background: rgba(248, 250, 252, 1);
  transform: translateY(-1px) scale(1.01);

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}

.btn-banner-primary:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.btn-banner-secondary:focus-visible,
.btn-banner-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   Template/Form Banner Buttons - Premium
   ========================================== */

.btn-banner-template,
.btn-banner-form,
.btn-banner-save-template {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid rgba(129, 140, 248, 0.5);
  background: rgba(129, 140, 248, 0.2);
  color: white;
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

.btn-banner-template:hover:not(:disabled),
.btn-banner-form:hover,
.btn-banner-save-template:hover {
  background: rgba(129, 140, 248, 0.35);
  border-color: var(--app-accent, #818cf8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}

.btn-banner-template:active:not(:disabled),
.btn-banner-form:active,
.btn-banner-save-template:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.btn-banner-template:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-banner-template:focus-visible,
.btn-banner-form:focus-visible,
.btn-banner-save-template:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(129, 140, 248, 0.25),
    0 2px 6px rgba(129, 140, 248, 0.2);
}

.btn-banner-template.has-template {
  background: rgba(39, 174, 96, 0.3);
  border-color: rgba(39, 174, 96, 0.6);
}

.btn-banner-template.has-template:hover {
  background: rgba(39, 174, 96, 0.4);
  border-color: #27ae60;
}

.btn-banner-template .template-icon {
  font-size: 1.1rem;
}

.btn-banner-template .template-label {
  font-size: 0.9rem;
}

/* Form Button in Banner */
.btn-banner-form {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(129, 140, 248, 0.2);
}

.placement-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.placement-header p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.design-reference {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-name-input-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.project-name-input-container label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(129, 140, 248, 0.9);
  white-space: nowrap;
}

.project-name-input {
  flex: 1;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  border: 2px solid rgba(129, 140, 248, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  transition: all 0.2s ease;
}

.project-name-input:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
  background: rgba(0, 0, 0, 0.4);
}

.project-name-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.unsaved-indicator {
  color: #e74c3c;
  font-size: 1.25rem;
  animation: pulse 2s ease-in-out infinite;
}

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

.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(129, 140, 248, 0.2);
}

.placement-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.placement-header p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.design-reference {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-name-input-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.project-name-input-container label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(129, 140, 248, 0.9);
  white-space: nowrap;
}

.project-name-input {
  flex: 1;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  border: 2px solid rgba(129, 140, 248, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  transition: all 0.2s ease;
}

.project-name-input:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
  background: rgba(0, 0, 0, 0.4);
}

.project-name-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.unsaved-indicator {
  color: #e74c3c;
  font-size: 1.25rem;
  animation: pulse 2s ease-in-out infinite;
}

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

.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.header-actions .btn-secondary,
.header-actions .btn-primary {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.header-actions .btn-secondary {
  background: var(--app-bg-secondary, #f8f9fa);
  color: var(--app-text-primary, #2c3e50);
  border: 2px solid var(--app-border, #e0e0e0);
}

.header-actions .btn-secondary:hover {
  background: var(--app-bg-hover, #e9ecef);
  transform: translateY(-1px);
}

.header-actions .btn-primary {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.header-actions .btn-primary:hover {
  background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.header-actions .btn-secondary,
.header-actions .btn-primary {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.header-actions .btn-secondary {
  background: var(--app-bg-secondary, #f8f9fa);
  color: var(--app-text-primary, #2c3e50);
  border: 2px solid var(--app-border, #e0e0e0);
}

.header-actions .btn-secondary:hover {
  background: var(--app-bg-hover, #e9ecef);
  transform: translateY(-1px);
}

.header-actions .btn-primary {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.header-actions .btn-primary:hover {
  background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.btn-banner-form:hover {
  background: rgba(16, 185, 129, 0.35);
  border-color: #10b981;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Save as Template Button in Banner (nur für Admins) */
.btn-banner-save-template {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid rgba(129, 140, 248, 0.5);
  background: rgba(129, 140, 248, 0.2);
  color: white;
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

.btn-banner-save-template:hover {
  background: rgba(129, 140, 248, 0.35);
  border-color: var(--app-accent, #818cf8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}

/* ==========================================
   Header
   ========================================== */

.placement-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 1.25rem 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(129, 140, 248, 0.2);
}

.placement-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.placement-header p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.design-reference {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-name-input-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.project-name-input-container label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(129, 140, 248, 0.9);
  white-space: nowrap;
}

.project-name-input {
  flex: 1;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  border: 2px solid rgba(129, 140, 248, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  transition: all 0.2s ease;
}

.project-name-input:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
  background: rgba(0, 0, 0, 0.4);
}

.project-name-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.unsaved-indicator {
  color: #e74c3c;
  font-size: 1.25rem;
  animation: pulse 2s ease-in-out infinite;
}

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

.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.header-actions .btn-secondary,
.header-actions .btn-primary {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.header-actions .btn-secondary {
  background: var(--app-bg-secondary, #f8f9fa);
  color: var(--app-text-primary, #2c3e50);
  border: 2px solid var(--app-border, #e0e0e0);
}

.header-actions .btn-secondary:hover {
  background: var(--app-bg-hover, #e9ecef);
  transform: translateY(-1px);
}

.header-actions .btn-primary {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.header-actions .btn-primary:hover {
  background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

/* ==========================================
   Rückseiten-Toggle Box (Links - Enable/Disable)
   ========================================== */

.panel-backside-toggle {
  background: var(--app-card-gradient, var(--app-card-bg, white));
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--app-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  margin-bottom: 1.5rem;
  border: 1px solid var(--app-border, rgba(255,255,255,0.1));
}

.panel-backside-toggle h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  margin: 0 0 1rem 0;
}

.backside-toggle-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 2px solid #ddd;
  transition: all 0.3s ease;
}

.backside-toggle-container:has(input:checked) {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-color: #4caf50;
}

/* ==========================================
   Seiten-Wechsel Box (Rechts - Front/Back Switch)
   Verbesserte Lesbarkeit mit helleren Farben
   ========================================== */

.panel-side-switcher {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.panel-side-switcher h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
}

.side-switcher-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.side-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #475569;
  font-weight: 600;
  position: relative;
}

.side-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.side-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
}

.side-btn.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.side-icon {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.side-btn.active .side-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.side-label {
  font-size: 0.85rem;
  font-weight: 700;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 28px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #3498db;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 4px #3498db;
}

.toggle-info {
  flex: 1;
}

.toggle-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.backside-toggle-container:has(input:checked) .toggle-label {
  color: #2e7d32;
  font-weight: 700;
}

.toggle-hint {
  font-size: 0.8rem;
  color: #666;
  display: block;
  margin-top: 0.25rem;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.backside-toggle-container:has(input:checked) .toggle-hint {
  color: #388e3c;
}

.backside-side-selector {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--app-border, #e0e0e0);
}

.side-selector-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  margin-bottom: 0.75rem;
}

/* ==========================================
   Multi-Produkt Feature (NEU)
   ========================================== */

.multi-product-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #E8F4F8 0%, #D4E7F0 100%);
  border: 2px solid #4CAF50;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

.badge-icon {
  font-size: 1.5rem;
}

.badge-text {
  flex: 1;
  font-size: 0.95rem;
  color: var(--app-text-primary, #1A1A1A);
}

.badge-text strong {
  color: #4CAF50;
  font-weight: 700;
}

/* ==========================================
   Toggle Products Button - Premium Success State
   ========================================== */

.btn-toggle-products {
  padding: 0.625rem 1.125rem;
  background: white;
  color: #10b981;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;

  /* Refined border */
  border: 1.5px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;

  /* Layered shadows */
  box-shadow:
    0 1px 2px rgba(16, 185, 129, 0.08),
    0 0 0 1px rgba(16, 185, 129, 0.04);

  /* Smooth transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.01em;
}

.btn-toggle-products:hover {
  background: #10b981;
  color: white;
  border-color: #10b981;
  transform: translateY(-1px) scale(1.02);

  box-shadow:
    0 2px 4px rgba(16, 185, 129, 0.15),
    0 4px 12px rgba(16, 185, 129, 0.25),
    0 0 0 1px rgba(16, 185, 129, 0.1);
}

.btn-toggle-products:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.btn-toggle-products:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.2),
    0 2px 4px rgba(16, 185, 129, 0.15);
}

.multi-product-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  background: #F8F9FA;
  border-radius: 8px;
  max-height: 250px;
  overflow-y: auto;
}

/* ==========================================
   Product Card - Premium
   ========================================== */

.product-card {
  background: var(--app-card-bg);
  border-radius: 12px;
  padding: 1.625rem;
  cursor: pointer;
  text-align: center;

  /* Refined border */
  border: 1.5px solid rgba(129, 140, 248, 0.15);

  /* Layered shadows */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(129, 140, 248, 0.08),
    0 0 0 1px rgba(129, 140, 248, 0.04);

  /* Smooth transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.product-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(129, 140, 248, 0.4);

  /* Enhanced layered shadow */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(129, 140, 248, 0.15),
    0 8px 30px rgba(129, 140, 248, 0.2),
    0 0 0 1px rgba(129, 140, 248, 0.08);
}

.product-card:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.product-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.product-icon-small {
  font-size: 1.5rem;
}

.product-name-small {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--app-text-primary, #1A1A1A);
}

.product-dims-small {
  font-size: 0.875rem;
  color: var(--app-text-secondary, #666);
}

.current-badge {
  padding: 0.25rem 0.75rem;
  background: #C9A56E;
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ==========================================
   Remove Product Button - Premium Icon Button
   ========================================== */

.btn-remove-product {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Layered shadows */
  box-shadow:
    0 1px 2px rgba(239, 68, 68, 0.12),
    0 0 0 1px rgba(239, 68, 68, 0.08);

  /* Smooth transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-remove-product:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1);

  box-shadow:
    0 2px 4px rgba(239, 68, 68, 0.2),
    0 4px 8px rgba(239, 68, 68, 0.25),
    0 0 0 1px rgba(239, 68, 68, 0.15);
}

.btn-remove-product:active {
  transform: scale(0.95);
  transition-duration: 50ms;
}

.btn-remove-product:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.2),
    0 2px 4px rgba(239, 68, 68, 0.15);
}

.product-item-compact.in-multi-select {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.multi-select-count {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #4CAF50;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

/* ==========================================
   Link Button - Premium Text Link
   ========================================== */

.btn-link {
  background: none;
  border: none;
  color: #818cf8;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.925rem;
  font-weight: 500;
  padding: 0.625rem 1.125rem;
  border-radius: 6px;
  letter-spacing: -0.01em;

  /* Smooth transitions */
  transition:
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.btn-link::after {
  content: '';
  position: absolute;
  bottom: 0.5rem;
  left: 1.125rem;
  right: 1.125rem;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transition: opacity 150ms ease;
}

.btn-link:hover {
  color: #6b72e8;
  background: rgba(129, 140, 248, 0.08);
}

.btn-link:hover::after {
  opacity: 0.6;
}

.btn-link:active {
  transform: scale(0.98);
}

.btn-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

/* ==========================================
   Product Selection View
   ========================================== */

.product-categories {
  max-width: 1400px;
  margin: 0 auto;
}

.product-category {
  margin-bottom: 3rem;
}

.product-category h3 {
  font-size: 1.5rem;
  color: var(--app-text-primary, #2C3E50);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.category-icon {
  font-size: 1.75rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  border: 2px solid rgba(129, 140, 248, 0.2);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(129, 140, 248, 0.4);
  border: 2px solid rgba(129, 140, 248, 0.5);
}

.product-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.product-card h4 {
  font-size: 1.25rem;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

.product-dimensions {
  font-size: 0.875rem;
  color: #C9A56E;
  font-weight: 600;
  margin: 0.5rem 0;
}

.product-description {
  font-size: 0.875rem;
  color: var(--app-text-secondary, #666);
  line-height: 1.5;
  margin: 0.75rem 0 0 0;
}

/* ==========================================
   PROFESSIONAL CSS GRID LAYOUT SYSTEM
   3-Column Grid inspired by Figma/Excalidraw
   ========================================== */

.placement-workspace {
  /* CSS Grid instead of Flexbox - more control */
  display: grid;
  grid-template-columns:
    var(--panel-left-width)  /* Left: Product/Material */
    1fr                      /* Center: Canvas (takes remaining space) */
    var(--panel-right-width); /* Right: Properties/Layers */
  grid-template-rows: 1fr;
  gap: var(--layout-gap);

  /* Full viewport height minus header & banner */
  min-height: calc(100vh - var(--layout-total-top-offset));
  height: calc(100vh - var(--layout-total-top-offset));

  /* Spacing */
  padding: 1.5rem 1rem;
  max-width: 100%;

  /* Overflow handling */
  overflow: hidden;

  /* Performance optimizations */
  contain: layout style;

  /* Smooth transitions when panels resize */
  transition: grid-template-columns var(--transition-duration) var(--transition-smooth);

  /* Container Query Support - Modern responsive */
  container-type: inline-size;
  container-name: workspace;
}

/* 4. Spalte: Template Form Panel (nur wenn aktiv) */
.template-form-column {
  width: 320px;
  flex-shrink: 0;
  height: 100%;
  max-height: calc(100vh - 250px);
  position: sticky;
  top: 190px; /* Header (108px) + Banner (~60px) + workspace padding (1.5rem ~24px) */
}

/* ==========================================
   📐 PROFESSIONAL GRID COLUMNS
   CSS Grid Panel System - Figma-inspired
   ========================================== */

/* LEFT COLUMN: Product + Material + Form & Size */
.product-selector-sidebar {
  /* Grid positioning */
  grid-column: 1;
  grid-row: 1;

  /* Internal layout */
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);

  /* Scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;

  /* Styling */
  padding: var(--panel-padding);

  /* Performance */
  contain: layout style paint;

  /* Smooth scrollbar */
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

  /* Container for responsive child elements */
  container-type: inline-size;
  container-name: left-panel;
}

/* Only set will-change when panel is animating (not collapsed) */
.product-selector-sidebar:not(.collapsed) {
  will-change: transform;
}

/* Webkit Scrollbar for Left Panel */
.product-selector-sidebar::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.product-selector-sidebar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.product-selector-sidebar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  transition: background var(--transition-duration);
}

.product-selector-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.product-selector-sidebar::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}

/* CENTER COLUMN: Canvas Area - Maximum Space */
.placement-main-center {
  /* Grid positioning - takes all remaining space */
  grid-column: 2;
  grid-row: 1;

  /* Internal layout */
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);

  /* Size constraints */
  min-width: 400px; /* Minimum for usable canvas */
  min-height: 100%;
  max-height: 100%;
  overflow: hidden; /* Canvas handles its own overflow */

  /* Performance */
  contain: layout style paint;

  /* Container for canvas elements */
  container-type: inline-size;
  container-name: canvas-area;
}

/* RIGHT COLUMN: Properties + Layers */
.placement-sidebar-right {
  /* Grid positioning */
  grid-column: 3;
  grid-row: 1;

  /* Internal layout */
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);

  /* Scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;

  /* Styling */
  padding: var(--panel-padding);

  /* Performance */
  contain: layout style paint;

  /* Smooth scrollbar */
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

  /* Container for responsive child elements */
  container-type: inline-size;
  container-name: right-panel;
}

/* Webkit Scrollbar for Right Panel */
.placement-sidebar-right::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.placement-sidebar-right::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.placement-sidebar-right::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  transition: background var(--transition-duration);
}

.placement-sidebar-right::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.placement-sidebar-right::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}

/* ==========================================
   DARK MODE SUPPORT
   Professional color scheme for dark environments
   ========================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Adjust scrollbar for dark mode */
    --scrollbar-track: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(129, 140, 248, 0.4);
    --scrollbar-thumb-hover: rgba(129, 140, 248, 0.6);
    --scrollbar-thumb-active: rgba(129, 140, 248, 0.8);
  }

  /* Workspace background */
  .placement-workspace {
    background: rgba(0, 0, 0, 0.02);
  }

  /* Panel backgrounds */
  .product-selector-sidebar,
  .placement-sidebar-right {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
  }

  /* Fallback for browsers without backdrop-filter support */
  @supports not (backdrop-filter: blur(10px)) {
    .product-selector-sidebar,
    .placement-sidebar-right {
      background: rgba(0, 0, 0, 0.85); /* Solid background as fallback */
    }
  }

  /* Panel borders */
  .product-selector-sidebar > *,
  .placement-sidebar-right > * {
    border-color: rgba(255, 255, 255, 0.1);
  }

  /* Focus states for dark mode */
  --focus-ring: 2px solid rgba(129, 140, 248, 0.8);
}

/* ==========================================
   ACCESSIBILITY IMPROVEMENTS
   Professional focus states and keyboard navigation
   ========================================== */

/* Focus visible for all interactive elements */
*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 4px;
}

/* Remove default outline */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Panel focus states */
.product-selector-sidebar:focus-within,
.placement-sidebar-right:focus-within {
  box-shadow: inset 0 0 0 2px rgba(129, 140, 248, 0.2);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .placement-workspace {
    transition: none !important;
  }

  .product-selector-sidebar {
    transition: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .product-selector-sidebar,
  .placement-main-center,
  .placement-sidebar-right {
    border: 1px solid currentColor;
  }

  *:focus-visible {
    outline-width: 3px;
    outline-color: currentColor;
  }
}

/* Resizer sind nicht mehr nötig - ausblenden */
.column-resizer {
  display: none;
}

.column-resizer:active::before {
  background: #A68B5B;
  height: 80px;
}

/* Linke Spalte: Produkt-Auswahl */
.placement-sidebar-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Alte Duplikat-Definitionen entfernt - siehe oben im neuen Layout */

/* Rechte Spalte: Grid für 2-spaltige Anordnung der Panels */
.placement-sidebar-right > * {
  /* Alle direkten Kinder nehmen volle Breite */
  width: 100%;
}

/* Alte Grid-Definition entfernt */
.placement-sidebar-right.old-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  align-items: start;
}

/* Bestimmte Panels sollen volle Breite haben */
.placement-sidebar-right > .material-selector-visual,
.placement-sidebar-right > .panel-design-controls,
.placement-sidebar-right > .panel-text-editor {
  grid-column: span 2;
}

/* Produkt-Info und Text-Controls bleiben schmal (1 Spalte) */
.placement-sidebar-right > .panel-product-info,
.placement-sidebar-right > .panel-text-controls {
  grid-column: span 1;
}

/* Responsive: Bei schmalen Viewports zurück zu 1 Spalte */
@media (max-width: 1400px) {
  .placement-sidebar-right {
    grid-template-columns: 1fr;
  }

  .placement-sidebar-right > * {
    grid-column: span 1 !important;
  }
}

/* ==========================================
   Produkt-Auswahl Sidebar (Neu)
   ========================================== */

/* Styling für die Kinder-Elemente in .product-selector-sidebar */
.product-selector-sidebar > * {
  background: var(--app-card-gradient, var(--app-card-bg, white));
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--app-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  border: 1px solid var(--app-border, rgba(255,255,255,0.1));
}

/* Alle h3 in der Sidebar haben dunklen Text für besseren Kontrast */
.product-selector-sidebar h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text-primary, #1a252f);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.product-category-compact h4 {
  font-size: 0.875rem;
  color: var(--app-text-secondary, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-category-compact .category-icon {
  font-size: 1rem;
}

.product-item-compact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 2px solid var(--app-border-medium, #E0E0E0);
  background: var(--app-card-bg, white);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  margin-bottom: 0.5rem;
}

.product-item-compact:hover {
  border-color: #C9A56E;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(201, 165, 110, 0.2);
}

.product-item-compact.selected {
  border-color: #C9A56E;
  border-width: 3px;
  background: var(--app-accent-light, rgba(201, 165, 110, 0.15));
  box-shadow: 0 4px 12px rgba(201, 165, 110, 0.25);
}

.product-preview-mini {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mini-canvas {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #F5E6D3 0%, #E8D5B5 100%);
  border: 1px solid #C9A56E;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.mini-canvas.shape-rectangle {
  border-radius: 4px;
}

.mini-canvas.shape-circle {
  border-radius: 50%;
}

.mini-canvas.shape-roundedRectangle {
  border-radius: 8px;
}

.design-preview-img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  opacity: 0.8;
}

.product-info-compact {
  flex: 1;
  min-width: 0;
}

.product-name-compact {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-dimensions-compact {
  font-size: 0.75rem;
  color: var(--app-text-secondary, #666);
}

.product-item-compact.selected .product-name-compact,
.product-item-compact.selected .product-dimensions-compact {
  color: var(--app-text-primary, #1a252f);
  font-weight: 600;
}

.selected-indicator-check {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #4CAF50;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* ==========================================
   Einklappbare Produktliste
   ========================================== */

.selected-product-compact {
  margin-bottom: 1rem;
}

.selected-product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.selected-product-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text-primary, #2c3e50);
  margin: 0;
  padding: 0;
  border: none;
}

.project-info-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid rgba(102, 126, 234, 0.3);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1976d2;
}

/* ==========================================
   Change Product Button - Premium Accent
   ========================================== */

.btn-change-product {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  background: var(--app-accent, #818cf8);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: -0.01em;

  /* Layered shadows */
  box-shadow:
    0 1px 3px rgba(129, 140, 248, 0.3),
    0 2px 6px rgba(129, 140, 248, 0.2);

  /* Smooth transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-change-product:hover {
  background: #6b72e8;
  transform: translateY(-1px) scale(1.02);

  box-shadow:
    0 2px 4px rgba(129, 140, 248, 0.35),
    0 4px 12px rgba(129, 140, 248, 0.3);
}

.btn-change-product:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.btn-change-product:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(129, 140, 248, 0.25),
    0 2px 6px rgba(129, 140, 248, 0.2);
}

.product-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

.product-list-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text-primary, #2c3e50);
  margin: 0;
}

/* ==========================================
   Collapse List Button - Premium Secondary
   ========================================== */

.btn-collapse-list {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  background: rgba(129, 140, 248, 0.06);
  color: var(--app-text-primary, #2c3e50);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: -0.01em;

  /* Refined border */
  border: 1.5px solid rgba(129, 140, 248, 0.15);

  /* Subtle shadows */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(129, 140, 248, 0.04);

  /* Smooth transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-collapse-list:hover {
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.3);
  color: #818cf8;
  transform: translateY(-1px) scale(1.02);

  box-shadow:
    0 2px 4px rgba(129, 140, 248, 0.08),
    0 4px 12px rgba(129, 140, 248, 0.12),
    0 0 0 1px rgba(129, 140, 248, 0.08);
}

.btn-collapse-list:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.btn-collapse-list:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(129, 140, 248, 0.2),
    0 2px 4px rgba(129, 140, 248, 0.1);
}

/* Material-Selector Sidebar (Links unter Produkt) */
.material-selector-sidebar {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--app-card-bg, white);
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--app-card-shadow, rgba(0, 0, 0, 0.08));
}

.material-selector-sidebar h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text-primary, #2c3e50);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

/* Material Header mit Toggle */
.material-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

.material-header h3 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text-primary, #2c3e50);
}

.material-simulation-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.material-simulation-toggle label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-text-secondary, #666);
  white-space: nowrap;
}

.material-simulation-toggle .toggle-switch {
  width: 44px;
  height: 24px;
}

.material-simulation-toggle .toggle-slider:before {
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
}

.material-simulation-toggle .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* No Product Selected State */
.no-product-selected {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-card-bg, white);
  border-radius: 12px;
  padding: 4rem 2rem;
  box-shadow: 0 2px 8px var(--app-card-shadow, rgba(0, 0, 0, 0.08));
  min-height: 500px;
}

.no-product-message {
  text-align: center;
  color: var(--app-text-secondary, #666);
}

.no-product-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 1rem;
  animation: pointLeft 2s ease-in-out infinite;
}

@keyframes pointLeft {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
}

.no-product-message h3 {
  font-size: 1.5rem;
  color: var(--app-text-primary, #2c3e50);
  margin-bottom: 0.5rem;
}

.no-product-message p {
  font-size: 1rem;
  color: var(--app-text-secondary, #666);
}

/* Sidebar */
.placement-sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.placement-sidebar::-webkit-scrollbar {
  width: 6px;
}

.placement-sidebar::-webkit-scrollbar-track {
  background: #F1F1F1;
  border-radius: 3px;
}

.placement-sidebar::-webkit-scrollbar-thumb {
  background: #C9A56E;
  border-radius: 3px;
}

/* Panel */
.panel {
  background: var(--app-card-gradient, var(--app-card-bg, white));
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--app-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  border: 1px solid var(--app-border, rgba(255,255,255,0.1));
}

.panel h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

/* ==========================================
   Ebenen-Liste (Layers List)
   ========================================== */

.panel-layers {
  background: var(--app-card-bg, white);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px var(--app-card-shadow, rgba(0, 0, 0, 0.08));
}

.panel-layers h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

/* Dark Mode für Panel-Titel */
[data-theme="dark"] .panel h3,
[data-theme="dark"] .panel-layers h3,
[data-theme="dark"] .panel-toolbox h3,
.dark-mode .panel h3,
.dark-mode .panel-layers h3,
.dark-mode .panel-toolbox h3 {
  color: #ffffff;
  font-weight: 700;
}

.layers-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden; /* Keine horizontale Scrollbar */
}

.layer-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer; /* Cursor für Selection */
  transition: all 0.2s ease;
  /* Grauer Hintergrund von Anfang an für bessere Lesbarkeit */
  background: rgba(0, 0, 0, 0.08);
  color: #1a252f;
  font-weight: 500;
}

.layer-item:hover {
  /* Beim Hover noch dunkler für visuelles Feedback */
  background: rgba(0, 0, 0, 0.12);
  cursor: grab;
}

.layer-item:active {
  cursor: grabbing;
}

.layer-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.layer-item.drag-over {
  border-top: 3px solid #C9A56E;
}

/* Dark Mode Anpassung für bessere Lesbarkeit */
[data-theme="dark"] .layer-item,
.dark-mode .layer-item {
  background: rgba(255, 255, 255, 0.2);
  color: #000000;
  font-weight: 600;
}

[data-theme="dark"] .layer-item:hover,
.dark-mode .layer-item:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #000000;
}

[data-theme="dark"] .layer-item.selected,
.dark-mode .layer-item.selected {
  background: rgba(201, 165, 110, 0.5);
  border-color: #E0C28E;
  color: #000000;
}

.layer-item.selected {
  /* Ausgewählte Ebene: Deutlicher Kontrast mit goldenem Akzent */
  background: rgba(201, 165, 110, 0.35);
  border-color: #C9A56E;
  box-shadow: 0 2px 8px rgba(201, 165, 110, 0.3);
  color: #000000;
  font-weight: 600;
}

/* ==========================================
   Tool-Box (Horizontal Element-Buttons)
   ========================================== */

.panel-toolbox .toolbox-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.toolbox-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  /* Gradient-Hintergrund mit weißer Schrift für bessere Sichtbarkeit */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
}

.toolbox-btn:hover {
  background: linear-gradient(135deg, #5568d3 0%, #6c4298 100%);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.toolbox-btn:active {
  transform: translateY(0);
}

.toolbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #FFFFFF;
}

.toolbox-icon svg {
  width: 100%;
  height: 100%;
  color: currentColor;
}

.toolbox-label {
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
}

/* Dark Mode für Toolbox - Gradient bleibt auch im Dark Mode */
[data-theme="dark"] .toolbox-btn,
.dark-mode .toolbox-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #FFFFFF;
  border-color: transparent;
}

[data-theme="dark"] .toolbox-icon,
[data-theme="dark"] .toolbox-label,
.dark-mode .toolbox-icon,
.dark-mode .toolbox-label {
  color: #FFFFFF;
  font-weight: 700;
}

[data-theme="dark"] .toolbox-btn:hover,
.dark-mode .toolbox-btn:hover {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.25) 0%, rgba(129, 140, 248, 0.15) 100%);
  border: 2px solid rgba(129, 140, 248, 0.6);
  color: rgba(129, 140, 248, 0.95);
  box-shadow: 0 4px 16px rgba(129, 140, 248, 0.3);
}

[data-theme="dark"] .toolbox-btn:hover .toolbox-icon,
[data-theme="dark"] .toolbox-btn:hover .toolbox-label,
.dark-mode .toolbox-btn:hover .toolbox-icon,
.dark-mode .toolbox-btn:hover .toolbox-label {
  color: rgba(129, 140, 248, 0.95);
}

/* ==========================================
   Material-Auswahl mit visuellen Farben (Tetris-Style)
   ========================================== */

.material-selector-visual {
  background: var(--app-card-bg, white);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px var(--app-card-shadow, rgba(0, 0, 0, 0.08));
}

.material-selector-visual h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

.material-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Media query nicht mehr nötig, Material-Liste ist immer vertikal */

.material-category-group {
  margin-bottom: 0.5rem;
}

.material-category-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--app-text-secondary, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

.material-item-visual {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  /* Ganzer Button zeigt Material-Farbe mit niedriger Opazität */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--material-color, #ddd) 15%, #F5F5F5),
    color-mix(in srgb, var(--material-color, #ddd) 8%, #F5F5F5)
  );
  border: 2px solid color-mix(in srgb, var(--material-color, #ddd) 30%, #E0E0E0);
  position: relative;
  overflow: hidden;
}

.material-item-visual::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--material-color, #ddd);
  transition: width 0.2s ease;
}

.material-item-visual:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--material-color, #ddd) 25%, #F5F5F5),
    color-mix(in srgb, var(--material-color, #ddd) 15%, #F5F5F5)
  );
  border-color: color-mix(in srgb, var(--material-color, #ddd) 50%, #C9A56E);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.material-item-visual:hover::before {
  width: 6px;
}

.material-item-visual.selected {
  border-color: color-mix(in srgb, var(--material-color, #C9A56E) 70%, #C9A56E);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--material-color, #ddd) 35%, #F5F5F5),
    color-mix(in srgb, var(--material-color, #ddd) 20%, #F5F5F5)
  );
  box-shadow: 0 3px 10px color-mix(in srgb, var(--material-color, #C9A56E) 30%, rgba(201, 165, 110, 0.2));
}

.material-item-visual.selected::before {
  width: 6px;
  background: #C9A56E;
}

.material-color-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid #E0E0E0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  background: var(--material-color, #ddd);
}

.material-item-visual.selected .material-color-circle {
  border-color: #C9A56E;
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(201, 165, 110, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.material-name-visual {
  position: relative;
  z-index: 1;
  flex-shrink: 0; /* Verhindert dass sich das Rechteck am äußeren Button orientiert */
  flex-grow: 0; /* Nur so groß wie der Text */
  width: 100%;
  padding: 0.1rem 0.4rem;
  background: linear-gradient(135deg, rgba(212, 175, 122, 0.65) 0%, rgba(193, 154, 107, 0.65) 100%);
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.3px;
  backdrop-filter: blur(5px);
  line-height: 1.2;
}

.material-item-visual.selected .material-name-visual {
  /* Text bleibt weiß und fett auch wenn ausgewählt */
  font-weight: 800;
}

/* Dark Mode: Helle Schrift für ausgewähltes Material */

.dark-mode .material-item-visual.selected .material-name-visual {
    color: #FFFFFF;
  }


/* ==========================================
   Custom Dimensions Request Button
   ========================================== */

.btn-custom-dimensions {
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-custom-dimensions:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5568d3 0%, #6c4298 100%);
}

.btn-custom-dimensions:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-grid > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-grid .label {
  font-size: 0.85rem;
  color: var(--app-text-secondary, #666);
  font-weight: 500;
}

.info-grid .value {
  font-size: 0.85rem;
  color: var(--app-text-primary, #2c3e50);
  font-weight: 600;
}

/* ==========================================
   Dynamischer Element-Editor
   ========================================== */

.no-selection-info {
  text-align: center;
  padding: 3rem 2rem;
}

.no-selection-info .info-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.no-selection-info .info-text {
  color: var(--app-text-secondary, #666);
  line-height: 1.6;
  font-size: 0.95rem;
}

.no-selection-info .info-text strong {
  color: var(--app-text-primary, #2c3e50);
  display: block;
  margin-bottom: 0.5rem;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

.editor-header h3 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
}

.btn-delete {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-delete:hover {
  background: #c0392b;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* Controls - Moderne Slider nach Standards */
.control-group {
  margin-bottom: 1.25rem;
  padding: 0;
  display: block; /* Block statt Flex - WarningTag muss darunter */
  width: 100%;
}

.control-group:last-child {
  margin-bottom: 0;
}

/* WarningTag muss IMMER in neuer Zeile sein */
.control-group .warning-tag {
  display: flex !important;
  width: 100% !important;
  margin-top: 0.75rem;
  clear: both;
  float: none !important;
}

/* NEU: Systematische Label-Row für konsistentes Layout */
.control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 0.75rem;
}

.control-label-row .label-text {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--app-text-primary, #2c3e50);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.control-label-row .value-display {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-accent, #C9A56E);
  min-width: 55px;
  text-align: right;
  flex-shrink: 0;
  margin: 0;
}

/* Fallback für alte Labels ohne control-label-row */
.control-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--app-text-primary, #2c3e50);
  margin-bottom: 0.5rem;
}

/* Verstecke value-display wenn es in control-label-row ist */
.control-group .control-label-row + input[type="range"] + .value-display {
  display: none !important;
}

.control-group input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #E0E0E0 0%, #C9A56E 50%, #A88554 100%);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.control-group input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  border: 3px solid #C9A56E;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease;
}

.control-group input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(201, 165, 110, 0.4);
}

.control-group input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(201, 165, 110, 0.6);
}

.control-group input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  border: 3px solid #C9A56E;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease;
  border: none;
}

.control-group input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(201, 165, 110, 0.4);
}

.control-group input[type="range"]::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

/* Value Display - wird unter Slider angezeigt oder in Label-Row */
.value-display {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--app-text-secondary, #666);
  clear: both;
}

/* Wenn value-display in control-label-row ist, überschreibe Styles */
.control-label-row .value-display {
  display: inline-block;
  width: auto;
  margin-top: 0;
  text-align: right;
}

.text-input,
.select-input {
  width: 100%;
  padding: 0.6rem;
  border: 2px solid var(--app-border-medium, #e0e0e0);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--app-card-bg, white);
  color: var(--app-text-primary, #2c3e50);
  transition: all 0.2s ease;
}

.text-input:focus,
.select-input:focus {
  outline: none;
  border-color: var(--app-accent, #667eea);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn-block {
  width: 100%;
}

/* Text Elements List */
.text-elements-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.text-element-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--app-hover-bg, #f8f9fa);
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.text-element-item:hover {
  background: var(--app-border-medium, #e9ecef);
}

.text-element-item.selected {
  background: var(--app-accent-light, #e8f0fe);
  border-color: var(--app-accent, #667eea);
  color: var(--app-text-primary, #2c3e50);
}

.btn-icon-delete {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(244, 67, 54, 0.1);
  color: #F44336;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-icon-delete:hover {
  background: #F44336;
  color: white;
}

/* Tips Panel */
.tips-panel {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.tips-panel h3 {
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.tips-panel ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style-type: '✓ ';
}

.tips-panel li {
  margin: 0.5rem 0;
  line-height: 1.5;
  font-size: 0.875rem;
}

.tips-panel li::marker {
  color: #FFD700;
  font-weight: bold;
}

/* ==========================================
   Canvas Area
   ========================================== */

.placement-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--app-card-gradient, var(--app-card-bg, white));
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--app-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  min-height: calc(100vh - 120px); /* ✅ Gleiche Höhe wie linke & rechte Spalte */
  max-height: calc(100vh - 120px); /* ✅ Alle 3 Spalten gleich hoch */

  /* Performance Optimizations */
  contain: layout style paint;
  will-change: auto;
  transform: translateZ(0); /* Force GPU layer */
  overflow-y: auto; /* Scrollbar falls Inhalt zu groß */
  border: 1px solid var(--app-border, rgba(255,255,255,0.1));
}

/* Canvas Controls über dem Canvas */
.canvas-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

/* Undo/Redo Controls - Links ausgerichtet */
.undo-redo-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto; /* Pusht alle anderen Elemente nach rechts */
}

.undo-btn,
.redo-btn {
  width: 36px;
  height: 36px;
  border: 2px solid #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
  font-weight: bold;
}

.undo-btn:hover:not(:disabled),
.redo-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #5568d3 0%, #6a3f91 100%);
  border-color: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.undo-btn:active:not(:disabled),
.redo-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.undo-btn:disabled,
.redo-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #e0e0e0;
  border-color: #bdbdbd;
  color: #9ca3af;
  box-shadow: none;
}

.ruler-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ruler-toggle label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  white-space: nowrap;
}

.ruler-toggle .toggle-switch {
  width: 44px;
  height: 24px;
}

.ruler-toggle .toggle-slider:before {
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
}

.ruler-toggle .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* Grid-Intensität Control - erscheint wenn Raster aktiv */
.grid-intensity-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(201, 165, 110, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(201, 165, 110, 0.2);
}

.grid-intensity-control label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  white-space: nowrap;
}

.grid-intensity-slider {
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(201, 165, 110, 0.3) 0%, rgba(201, 165, 110, 1) 100%);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.grid-intensity-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #C9A56E;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
}

.grid-intensity-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(201, 165, 110, 0.5);
}

.grid-intensity-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.grid-intensity-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #C9A56E;
  cursor: grab;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.grid-intensity-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #C9A56E;
  min-width: 35px;
  text-align: right;
}

/* Zoom Controls (Dummy für später) */
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(102, 126, 234, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.zoom-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.zoom-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
}

.zoom-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(102, 126, 234, 0.3);
}

.zoom-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: linear-gradient(135deg, #ccc 0%, #999 100%);
}

.zoom-btn:disabled:hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.zoom-level {
  font-size: 0.75rem;
  font-weight: 600;
  color: #667eea;
  min-width: 40px;
  text-align: center;
  user-select: none;
}

/* Preis-Button als Link-Style */
.btn-link-price {
  background: none;
  border: none;
  color: #667eea;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0;
  transition: all 0.2s ease;
}

.btn-link-price:hover {
  color: #764ba2;
  text-decoration-thickness: 2px;
}

.canvas-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-start; /* ✅ Links-oben orientiert für Lineal-Alignment */
  justify-content: flex-start; /* ✅ Links-orientiert - Lineal ist auch links */
  overflow: visible; /* Changed from hidden - allows ruler to extend outside */
  position: relative;

  /* Smooth Scrolling für bessere UX */
  scroll-behavior: smooth;

  /* Performance Optimizations */
  contain: layout;
  transform: translateZ(0); /* Force GPU layer for smooth rendering */

  /* Custom Scrollbar Styling */
  padding: 2.5rem; /* Increased from 1rem to match ruler offset (40px) */
  /* Verhindert dass canvas ausbricht */
  max-width: 100%;
  box-sizing: border-box;
  /* Hellerer Hintergrund für bessere Lesbarkeit der Lineal-Zahlen im Darkmode */
  background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
  /* Eleganter Gold/Braun-Border zur Abgrenzung - passt zum Lunaria-Schema */
  border: 3px solid #C9A56E;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(201, 165, 110, 0.3),
    0 0 20px rgba(129, 140, 248, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(201, 165, 110, 0.2);
}

/* Custom Scrollbar für Canvas Wrapper */
.canvas-wrapper::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.canvas-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

.canvas-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #C9A56E 0%, #A88554 100%);
  border-radius: 6px;
  border: 2px solid #f1f1f1;
}

.canvas-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #6366f1 0%, #967744 100%);
}

.canvas-container {
  position: relative;
  /* ✅ FIX: Kein max-width - nutzt vollen verfügbaren Raum */
  width: 100%;
  /* Grid-Layout entfernt - Lineale sind jetzt absolut positioniert im Wrapper */
  /* display: grid; */
  /* grid-template-columns: 30px 1fr; */
  /* grid-template-rows: 30px 1fr; */
  /* gap: 0; */
  /* Wichtig: Beim Zoom soll der Container NICHT zentriert werden (für Lineal-Alignment) */
  margin: 0 !important;

  /* Performance Optimizations */
  contain: layout style;
  isolation: isolate; /* Create new stacking context */
  /* KRITISCH: Kein Padding! Das 16px padding verschiebt den Canvas nach innen */
  /* !important überschreibt alle anderen CSS-Regeln (z.B. aus DesignEditor.css) */
  padding: 0 !important;
  /* Verhindere dass Transform die Bounding Box verändert */
  transform-style: preserve-3d;
  /* Bessere Rendering-Performance */
  will-change: transform;
  backface-visibility: hidden;
}

/* Lineale - Modernes Design mit Dark Mode Support */
.canvas-ruler {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  position: relative;
  /* Besseres Rendering bei Zoom */
  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.dark-mode .canvas-ruler {
    background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
    border-color: #555;
  }


.canvas-ruler.ruler-horizontal {
  /* grid-column und grid-row entfernt - Lineale sind jetzt absolut positioniert */
  /* grid-column: 2; */
  /* grid-row: 1; */
  height: 30px;
  border-bottom: 2px solid #c9a56e;
}

.canvas-ruler.ruler-vertical {
  /* grid-column und grid-row entfernt - Lineale sind jetzt absolut positioniert */
  /* grid-column: 1; */
  /* grid-row: 2; */
  width: 30px;
  border-right: 2px solid #c9a56e;
}

/* Achsen-Beschriftung (X/Y) */
.ruler-axis-label {
  position: absolute;
  font-size: 0.75rem;
  font-weight: 800;
  color: #c9a56e;
  font-family: 'Courier New', monospace;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.canvas-ruler.ruler-horizontal .ruler-axis-label {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.canvas-ruler.ruler-vertical .ruler-axis-label {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}


.dark-mode .ruler-axis-label {
    color: #d4a76a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }


.ruler-mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.canvas-ruler.ruler-horizontal .ruler-mark {
  height: 100%;
  width: 1px;
}

.canvas-ruler.ruler-vertical .ruler-mark {
  width: 100%;
  height: 1px;
}

.ruler-tick {
  background: #6c757d;
  position: absolute;
  transition: background 0.2s;
}

/* Major Ticks (10mm) */
.ruler-tick.major {
  background: #495057;
}

/* Minor Ticks (5mm) */
.ruler-tick.minor {
  background: #adb5bd;
}


.dark-mode .ruler-tick.major {
    background: #d4d4d4;
  }
.dark-mode .ruler-tick.minor {
    background: #888;
  }


.canvas-ruler.ruler-horizontal .ruler-tick {
  left: 0;
  bottom: 0;
  width: 1px;
}

.canvas-ruler.ruler-horizontal .ruler-tick.major {
  height: 12px;
  width: 1.5px;
}

.canvas-ruler.ruler-horizontal .ruler-tick.minor {
  height: 6px;
}

.canvas-ruler.ruler-vertical .ruler-tick {
  right: 0;
  top: 0;
  height: 1px;
}

.canvas-ruler.ruler-vertical .ruler-tick.major {
  width: 12px;
  height: 1.5px;
}

.canvas-ruler.ruler-vertical .ruler-tick.minor {
  width: 6px;
}

.ruler-label {
  position: absolute;
  font-size: 0.65rem;
  font-weight: 700;
  color: #495057;
  font-family: 'Courier New', monospace;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}


.dark-mode .ruler-label {
    color: #d4d4d4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }


.canvas-ruler.ruler-horizontal .ruler-label {
  left: 2px;
  top: 2px;
}

.canvas-ruler.ruler-vertical .ruler-label {
  right: 2px;
  top: 2px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* mm-Label als Tag in oberer linker Ecke */
.ruler-unit-label {
  /* Grid-Regeln entfernt - mm-Label ist jetzt absolut positioniert */
  /* grid-column: 1; */
  /* grid-row: 1; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #c9a56e 0%, #b8935a 100%);
  border: 2px solid #b8935a;
  box-shadow: 0 2px 6px rgba(201, 165, 110, 0.4);
  z-index: 15;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.product-canvas {
  /* Grid-Regeln entfernt - Canvas ist jetzt direktes Kind des (nicht-Grid) Containers */
  /* grid-column: 2; */
  /* grid-row: 2; */
  position: relative;
  width: 100%;
  height: 100%; /* Nutze volle Container-Höhe */
  background: linear-gradient(135deg, #F5E6D3 0%, #E8D5B5 100%);
  border: 3px solid #C9A56E;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: visible; /* Geändert: Damit Resize-Handles außerhalb sichtbar sind */
  transition: transform 0.2s ease-out;
  box-sizing: border-box; /* Border ist Teil der Größe, nicht zusätzlich */
}

/* Shape Variants - Canvas Form-spezifisch */
.product-canvas.shape-rectangle {
  border-radius: 0; /* ✅ FIX: Rechteck komplett eckig, keine Clipping der Designfläche */
}

.product-canvas.shape-circle {
  border-radius: 8px; /* Leichte Rundung als Rahmen */
}

.product-canvas.shape-roundedRectangle {
  border-radius: 8px; /* Leichte Rundung als Rahmen */
}

/* Gravable Area */
.gravable-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FFF8E7 0%, #F5E6D3 100%);
  transition: background 0.3s ease;
}

/* Shape-specific gravable area - inherits parent canvas shape */
.shape-circle .gravable-area {
  /* Border-radius removed - clipPath applied via inline style for precision */
  /* Heller Hintergrund für Kreis-Designfläche - besserer Kontrast zum dunklen Außenbereich */
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%) !important;
  border-radius: 50%;
}

.shape-square .gravable-area {
  border-radius: 8px;
}

.shape-rectangle .gravable-area {
  border-radius: 0; /* ✅ FIX: Rechteck ohne Rundungen */
}

.shape-roundedRectangle .gravable-area {
  border-radius: 16px;
}

.shape-oval .gravable-area {
  border-radius: 50%;
}

.shape-triangle .gravable-area,
.shape-hexagon .gravable-area,
.shape-star .gravable-area,
.shape-heart .gravable-area,
.shape-tannenbaum .gravable-area,
.shape-schneeflocke .gravable-area {
  /* Custom shapes use clip-path from parent, no additional border-radius */
  border-radius: 0;
}

/* Material Simulation - Textur-Overlay */
.gravable-area.material-simulation {
  /* Removed !important to allow inline style overrides for texture scaling */
  background-position: center;
  /* background-size and background-repeat controlled via inline styles */
}

/* Fallback wenn kein Bild geladen werden kann */
.gravable-area.material-simulation.color-fallback {
  background-size: auto;
}

/* Design Element */
.design-element {
  position: absolute;
  cursor: grab;
  user-select: none;
  min-width: 20px;
  min-height: 20px;
}

.design-element:active {
  cursor: grabbing;
}

.design-element img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Text Elements */
.text-element {
  position: absolute;
  cursor: grab;
  white-space: nowrap;
  user-select: none;
  padding: 0.25rem 0.5rem;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-width: 30px;
  min-height: 20px;
  touch-action: none; /* Bessere Touch-Unterstützung */
}

.text-element:active {
  cursor: grabbing;
}

.text-element:hover {
  border-color: rgba(201, 165, 110, 0.5);
  background: rgba(201, 165, 110, 0.1);
}

.text-element.selected {
  border-color: #C9A56E;
  background: rgba(201, 165, 110, 0.15);
  box-shadow: 0 2px 8px rgba(201, 165, 110, 0.3);
  cursor: move !important;
}

/* Move-Cursor für alle ausgewählten Elemente */
.qr-element.selected,
.pattern-element.selected,
.image-element.selected,
.design-element.selected {
  cursor: move !important;
}

/* Resize Handles - Verbessert: Größer und besser sichtbar */
.resize-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border: 3px solid #3498db;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.resize-handle:hover {
  width: 26px;
  height: 26px;
  background: #3498db;
  border-color: white;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.6);
}

.resize-handle-nw {
  top: -10px;
  left: -10px;
  cursor: nw-resize;
}

.resize-handle-nw:hover {
  top: -13px;
  left: -13px;
}

.resize-handle-ne {
  top: -10px;
  right: -10px;
  cursor: ne-resize;
}

.resize-handle-ne:hover {
  top: -13px;
  right: -13px;
}

.resize-handle-sw {
  bottom: -10px;
  left: -10px;
  cursor: sw-resize;
}

.resize-handle-sw:hover {
  bottom: -13px;
  left: -13px;
}

.resize-handle-se {
  bottom: -10px;
  right: -10px;
  cursor: se-resize;
}

.resize-handle-se:hover {
  bottom: -13px;
  right: -13px;
}

/* Seiten-Handles (nur wenn aspect ratio unlocked) */
.resize-handle-n {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  cursor: n-resize;
}

.resize-handle-n:hover {
  top: -13px;
  transform: translateX(-50%);
}

.resize-handle-e {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: e-resize;
}

.resize-handle-e:hover {
  right: -13px;
  transform: translateY(-50%);
}

.resize-handle-s {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  cursor: s-resize;
}

.resize-handle-s:hover {
  bottom: -13px;
  transform: translateX(-50%);
}

.resize-handle-w {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: w-resize;
}

.resize-handle-w:hover {
  left: -13px;
  transform: translateY(-50%);
}

/* Guidelines */
.guidelines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.guideline {
  position: absolute;
  background: rgba(201, 165, 110, 0.3);
  pointer-events: none;
}

.guideline.horizontal {
  width: 100%;
  height: 1px;
}

.guideline.vertical {
  height: 100%;
  width: 1px;
}

/* Canvas Grid/Raster */
.canvas-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}

.grid-line {
  position: absolute;
  background: rgba(201, 165, 110, 0.15);
  pointer-events: none;
  /* Force hardware acceleration and pixel-perfect rendering */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.grid-line.horizontal {
  width: 100%;
  height: 1px;
  /* Ensure consistent rendering */
  transform: translateY(-0.5px) translateZ(0);
}

.grid-line.vertical {
  height: 100%;
  width: 1px;
  /* Ensure consistent rendering */
  transform: translateX(-0.5px) translateZ(0);
}

/* Lock-Indicator für gesperrte Elemente */
.element-lock-indicator {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  cursor: help;
}

/* Text-Element Locked State */
.text-element.locked {
  cursor: not-allowed !important;
  opacity: 0.9;
}

/* Textarea Styling */
.text-textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  line-height: 1.4;
}

/* Button Group für Text-Ausrichtung */
.button-group {
  display: flex;
  gap: 0.5rem;
}

.btn-group {
  flex: 1;
  padding: 0.5rem;
  background: var(--app-bg-secondary, #f8f9fa);
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text-secondary, #666);
}

.btn-group:hover {
  border-color: var(--app-accent, #667eea);
  background: var(--app-accent-light, rgba(102, 126, 234, 0.1));
  transform: translateY(-1px);
}

.btn-group.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

/* Dimensions Display */
.dimensions-display {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dimension {
  font-size: 0.875rem;
  font-weight: 600;
  color: #666;
  margin: 0 1rem;
}

/* ==========================================
   Action Buttons
   ========================================== */

.action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1600px;
  margin: 2rem auto 0;
}

.btn-secondary,
.btn-primary {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary {
  background: rgba(102, 126, 234, 0.08);
  color: var(--app-text-primary, #2c3e50);
  border: 2px solid rgba(102, 126, 234, 0.2);
  font-weight: 600;
}

.btn-secondary:hover {
  border-color: var(--app-accent, #667eea);
  color: var(--app-accent, #667eea);
  background: rgba(102, 126, 234, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5568d3 0%, #6c4298 100%);
}

/* Edit Design Button */
.btn-edit-design {
  width: 100%;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-edit-design:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* ==========================================
   Responsive (OLD - Replaced by Professional CSS Grid System below)
   ========================================== */

/* ⚠️ REMOVED: Old conflicting responsive rule
   The professional CSS Grid system handles responsive layouts
   starting at line 5300+ with proper breakpoints */

@media (max-width: 768px) {
  .product-placement {
    padding: 1rem;
  }

  .placement-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .placement-sidebar {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column-reverse;
  }

  .btn-secondary,
  .btn-primary {
    width: 100%;
  }
}

/* Material Grid */
.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.material-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.material-option:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
  transform: translateY(-2px);
}

.material-option.selected {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.material-preview {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.material-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.material-name {
  font-weight: 600;
  color: var(--app-text-primary, #1a252f);
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}


.dark-mode .material-name {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }


.material-desc {
  font-size: 0.75rem;
  color: var(--app-text-secondary, #6c757d);
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
  .material-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
  }

  .material-preview {
    width: 50px;
    height: 50px;
  }
}


/* No Design Warning */
.no-design-warning {
  background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
  border: 2px solid #ffc107;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

.no-design-warning .warning-icon {
  font-size: 3rem;
  margin: 0;
}

.no-design-warning .warning-text {
  color: #856404;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0.75rem 0;
}

.no-design-warning .warning-text strong {
  color: #664d03;
  font-size: 1.05rem;
}


/* Produkt-Info Panel - gleiche Breite wie Material */
.panel-product-info {
  min-width: 100%;
}

/* Info-Note für Hinweise (z.B. Lasergravur) */
.info-note {
  background: linear-gradient(135deg, #E8F4F8 0%, #D4E7F0 100%);
  border-left: 4px solid #3498db;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

.info-note p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #1a252f;
  font-weight: 500;
}

.info-note strong {
  color: #2c3e50;
  font-weight: 700;
}

/* Dark Mode für Info-Note */
[data-theme="dark"] .info-note {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.15) 0%, rgba(52, 152, 219, 0.25) 100%);
  border-left-color: #5dade2;
}

[data-theme="dark"] .info-note p {
  color: #e8f4f8;
  font-weight: 500;
}

[data-theme="dark"] .info-note strong {
  color: #ffffff;
  font-weight: 700;
}

/* Checkbox Control - Verbessert: Inline Label mit Tooltip */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--app-text-primary, #2c3e50);
  font-weight: 500;
  margin-bottom: 0;
}

.checkbox-label span {
  flex: 1;
  line-height: 1.3;
}

.checkbox-input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #3498db;
  flex-shrink: 0;
}

/* Tooltip Icon - Fragezeichen neben Label */
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3498db;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  cursor: help;
  flex-shrink: 0;
  margin-left: 0.4rem;
  position: relative;
  user-select: none;
  opacity: 0.4;
  transition: all 0.2s ease;
}

.tooltip-icon:hover {
  background: #2980b9;
  transform: scale(1.1);
  opacity: 1;
}

/* Tooltip Bubble */
.tooltip-icon .tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #2c3e50;
  color: white;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: normal;
  line-height: 1.4;
  white-space: normal;
  width: 220px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

/* Arrow */
.tooltip-icon .tooltip-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #2c3e50;
}

.tooltip-icon:hover .tooltip-bubble {
  opacity: 1;
  visibility: visible;
}

/* Alte control-hint wird versteckt - wird durch Tooltip ersetzt */
.control-hint {
  display: none;
}

/* ==========================================
   Design Editor Spezifische Styles
   ========================================== */

/* Tools Section */
.tools-section {
  margin-bottom: 1.5rem;
}

.tools-section h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text-primary, #2c3e50);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--app-border-light, #f0f0f0);
}

.tool-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tool-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tool-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.tool-btn:active {
  transform: translateY(0);
}

/* Element Properties */
.element-properties {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--app-hover-bg, #f8f9fa);
  border-radius: 8px;
}

.properties-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.properties-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text-primary, #2c3e50);
  margin: 0;
}

.btn-delete-element {
  padding: 0.5rem 0.75rem;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.btn-delete-element:hover {
  background: #c82333;
  transform: scale(1.05);
}

.pattern-properties label,
.image-properties label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
}

.pattern-properties input[type="number"],
.image-properties input[type="number"] {
  padding: 0.5rem;
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 6px;
  font-size: 0.9rem;
}

.pattern-properties input[type="range"],
.image-properties input[type="range"] {
  width: 100%;
}

/* Layers Section */
.layers-section {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 2px solid var(--app-border-light, #f0f0f0);
}

.layers-section h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text-primary, #2c3e50);
  margin: 0 0 0.75rem 0;
}

.layers-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.layer-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--app-card-bg, white);
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.layer-item:hover {
  background: var(--app-hover-bg, #f8f9fa);
  border-color: #667eea;
}

.layer-item.selected {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.layer-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.layer-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--app-text-primary, #2c3e50);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-layers {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--app-text-secondary, #666);
  font-size: 0.9rem;
}

/* Canvas Elements */
.canvas-element {
  box-sizing: border-box;
}

.canvas-element.selected {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

.canvas-element.selected::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px dashed #667eea;
  pointer-events: none;
}

/* Design Info Box in Sidebar */
.design-info-box {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.08) 0%, rgba(129, 140, 248, 0.05) 100%);
  border: 2px solid rgba(129, 140, 248, 0.3);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.design-info-box h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text-primary, #2c3e50);
}

.design-info-box p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--app-text-secondary, #666);
}

/* ==========================================
   Canvas Controls Bar (für DesignEditor)
   ========================================== */

.canvas-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--app-card-bg, white);
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.control-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  background: var(--app-hover-bg, #f8f9fa);
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--app-text-primary, #2c3e50);
  transition: all 0.2s ease;
}

.control-btn:hover:not(:disabled) {
  background: var(--app-accent-light, #e8f0fe);
  border-color: var(--app-accent, #667eea);
  transform: translateY(-1px);
}

.control-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.control-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.control-divider {
  width: 1px;
  height: 24px;
  background: var(--app-border, #e0e0e0);
  margin: 0 0.25rem;
}

.zoom-display {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  min-width: 42px;
  text-align: center;
}

.zoom-btn {
  padding: 0.35rem 0.65rem;
  background: var(--app-hover-bg, #f8f9fa);
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  transition: all 0.2s ease;
  line-height: 1;
}

.zoom-btn:hover {
  background: var(--app-accent-light, #e8f0fe);
  border-color: var(--app-accent, #667eea);
}

.zoom-reset-btn {
  padding: 0.35rem 0.65rem;
  background: var(--app-accent, #667eea);
  border: 2px solid var(--app-accent, #667eea);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  transition: all 0.2s ease;
}

.zoom-reset-btn:hover {
  background: #5568d3;
  border-color: #5568d3;
  transform: translateY(-1px);
}

/* ==========================================
   Professional Toolbox (für DesignEditor)
   ========================================== */

.panel-toolbox .toolbox-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.toolbox-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: var(--app-card-bg, white);
  border: 2px solid var(--app-border, #e0e0e0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 90px;
}

.toolbox-btn:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.toolbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--app-accent, #667eea);
}

.toolbox-btn:hover .toolbox-icon {
  color: #764ba2;
}

.toolbox-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  text-align: center;
  line-height: 1.2;
}

/* ==========================================
   Panel Styles (Professional)
   ========================================== */

.panel {
  background: var(--app-card-bg, white);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.panel h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text-primary, #2c3e50);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

.panel:last-child {
  margin-bottom: 0;
}

/* ==========================================
   Form & Größe Panel - Premium Figma-Level Styling
   Inspired by: Figma, Linear, Notion, Vercel
   ========================================== */

.panel-form-size {
  /* Inherits from .panel base styles */
}

.geometry-selection-section,
.size-selection-section {
  margin-bottom: 1.25rem;
}

.selection-section-label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.875rem;
  color: var(--app-text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em; /* Tighter, more modern */
}

.geometry-grid {
  display: grid;
  gap: 0.625rem; /* Slightly tighter for modern feel */
}

.geometry-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.geometry-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
}

/* Premium Button Styling - Figma/Linear Inspired */
.geometry-button {
  position: relative;
  padding: 0.875rem 0.625rem;
  border: 1.5px solid var(--app-border, #e2e8f0);
  border-radius: 12px; /* Slightly more rounded for modern look */
  background: var(--app-card-bg, white);
  cursor: pointer;

  /* Smooth multi-property transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;

  /* Layered shadow like Figma */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.02);

  /* Prevent text selection */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.geometry-button:hover {
  border-color: var(--app-accent, #818cf8);
  transform: translateY(-1px) scale(1.01); /* Subtle scale on hover */

  /* Enhanced layered shadow on hover */
  box-shadow:
    0 2px 4px rgba(129, 140, 248, 0.08),
    0 4px 12px rgba(129, 140, 248, 0.12),
    0 0 0 1px rgba(129, 140, 248, 0.1);
}

.geometry-button:active {
  transform: translateY(0) scale(0.98); /* Feedback on click */
  transition-duration: 50ms; /* Faster for active state */
}

.geometry-button.selected {
  border-color: var(--app-accent, #818cf8);
  background: linear-gradient(
    135deg,
    rgba(129, 140, 248, 0.1) 0%,
    rgba(167, 139, 250, 0.06) 100%
  );

  /* Ring effect like Tailwind */
  box-shadow:
    0 0 0 3px rgba(129, 140, 248, 0.12),
    0 2px 4px rgba(129, 140, 248, 0.1),
    0 4px 12px rgba(129, 140, 248, 0.15);
}

/* Focus state for keyboard navigation */
.geometry-button:focus-visible {
  outline: none;
  border-color: var(--app-accent, #818cf8);
  box-shadow:
    0 0 0 3px rgba(129, 140, 248, 0.2),
    0 2px 4px rgba(129, 140, 248, 0.1);
}

.geometry-button-icon {
  font-size: 2rem;
  color: #64748b;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
}

.geometry-button.selected .geometry-button-icon {
  color: var(--app-accent, #818cf8);
}

.geometry-button:hover .geometry-button-icon {
  color: var(--app-accent, #818cf8);
}

.geometry-button-text {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.geometry-button.selected .geometry-button-text {
  color: var(--app-accent, #818cf8);
  font-weight: 600;
}

.geometry-button:hover .geometry-button-text {
  color: var(--app-accent, #818cf8);
}

/* Size Selection Buttons - Green accent variant */
.size-button {
  position: relative;
  padding: 0.875rem 0.625rem;
  border: 1.5px solid var(--app-border, #e2e8f0);
  border-radius: 12px;
  background: var(--app-card-bg, white);
  cursor: pointer;

  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.02);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.size-button:hover {
  border-color: #10b981;
  transform: translateY(-1px) scale(1.01);

  box-shadow:
    0 2px 4px rgba(16, 185, 129, 0.08),
    0 4px 12px rgba(16, 185, 129, 0.12),
    0 0 0 1px rgba(16, 185, 129, 0.1);
}

.size-button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.size-button.selected {
  border-color: #10b981;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(5, 150, 105, 0.06) 100%
  );

  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.12),
    0 2px 4px rgba(16, 185, 129, 0.1),
    0 4px 12px rgba(16, 185, 129, 0.15);
}

.size-button:focus-visible {
  outline: none;
  border-color: #10b981;
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.2),
    0 2px 4px rgba(16, 185, 129, 0.1);
}

.size-button-label {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.size-button.selected .size-button-label,
.size-button:hover .size-button-label {
  color: #10b981;
  font-weight: 600;
}

.size-button-dimensions {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.size-button.selected .size-button-dimensions {
  color: #059669;
}

.size-button:hover .size-button-dimensions {
  color: #10b981;
}

/* Current Size Display - Modern info badge */
.current-size-display {
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 10px;
  border: 1.5px solid #bae6fd;

  /* Subtle shadow for depth */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.current-size-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0369a1;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.current-size-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0c4a6e;
  letter-spacing: -0.02em;
}

/* Dark Mode Support - Premium */
@media (prefers-color-scheme: dark) {
  .geometry-button,
  .size-button {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(148, 163, 184, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.05);
  }

  .geometry-button:hover {
    border-color: var(--app-accent, #818cf8);
    background: rgba(51, 65, 85, 0.6);

    box-shadow:
      0 2px 4px rgba(129, 140, 248, 0.15),
      0 4px 12px rgba(129, 140, 248, 0.2),
      0 0 0 1px rgba(129, 140, 248, 0.2);
  }

  .geometry-button.selected {
    background: rgba(129, 140, 248, 0.15);
    border-color: var(--app-accent, #818cf8);

    box-shadow:
      0 0 0 3px rgba(129, 140, 248, 0.2),
      0 2px 4px rgba(129, 140, 248, 0.15),
      0 4px 12px rgba(129, 140, 248, 0.25);
  }

  .size-button:hover {
    border-color: #10b981;
    background: rgba(51, 65, 85, 0.6);

    box-shadow:
      0 2px 4px rgba(16, 185, 129, 0.15),
      0 4px 12px rgba(16, 185, 129, 0.2),
      0 0 0 1px rgba(16, 185, 129, 0.2);
  }

  .size-button.selected {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;

    box-shadow:
      0 0 0 3px rgba(16, 185, 129, 0.2),
      0 2px 4px rgba(16, 185, 129, 0.15),
      0 4px 12px rgba(16, 185, 129, 0.25);
  }

  .current-size-display {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(129, 140, 248, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .current-size-label {
    color: #818cf8;
  }

  .current-size-value {
    color: #a78bfa;
  }

  .selection-section-label {
    color: #e2e8f0;
  }

  .geometry-button-icon,
  .geometry-button-text {
    color: #94a3b8;
  }

  .size-button-label,
  .size-button-dimensions {
    color: #94a3b8;
  }
}

/* Panel Scrolling für Bottom Panels - Einheitliches Verhalten */
.panel-layers,
.panel-toolbox,
.panel-price-box {
  max-height: 400px; /* Konsistente Höhe für alle Bottom-Panels */
}

/* Element Editor Panel - Volle Höhe bis zur Tool-Box */
.panel-element-editor {
  /* Entfernt: max-height Limit - Panel soll sich bis zur Tool-Box erstrecken */
  flex: 1;  /* Nimmt verfügbaren Platz ein */
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* Verhindere Overflow des Containers */
  min-height: 400px; /* Mindesthöhe für gute Usability */
}

/* ⚠️ FIX: Keine einzelnen Scrollbars - nur eine große für die Sidebar */
.panel-element-editor > *:not(h3):not(.no-selection-info) {
  /* Keine overflow-y: auto mehr - scrollt nur die parent sidebar */
  flex: 1;
  overflow: visible; /* ✅ Kein Scroll - Elemente wachsen frei */
  padding-bottom: 1rem; /* Extra Padding am Ende */
}

.panel-layers .layers-list {
  max-height: 330px; /* Überschreibt die 300px von vorher */
}

.panel-toolbox {
  overflow: visible; /* Toolbox soll nicht scrollen - hat fixe Buttons */
}

/* Element Editor Panel */
.panel-element-editor .no-selection-info {
  text-align: center;
  padding: 2rem 1rem;
}

.panel-element-editor .editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--app-border, #f0f0f0);
}

/* Control Groups */
.control-groups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-label-row label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
}

.value-display {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-accent, #667eea);
  min-width: 50px;
  text-align: right;
}

.control-group input[type="range"] {
  width: 100%;
  height: 6px;
  background: var(--app-border, #e0e0e0);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.control-group input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
}

.control-group input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  border: none;
}

/* Layers Panel */
.panel-layers .no-layers-info {
  text-align: center;
  padding: 2rem 1rem;
}

/* Delete Button */
.btn-delete {
  padding: 0.5rem 1rem;
  background: #fee;
  border: 2px solid #fcc;
  border-radius: 6px;
  color: #e74c3c;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-delete:hover {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
  transform: translateY(-1px);
}

/* Unsaved Indicator Left (in Banner) */
.unsaved-indicator-left {
  font-size: 1.5rem;
  line-height: 1;
  animation: pulse 2s ease-in-out infinite;
}

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

/* Project Name Input Large */
.project-name-input-large {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.project-name-input-large::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.project-name-input-large:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Banner Actions */
.banner-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-banner-primary {
  padding: 0.75rem 1.5rem;
  background: white;
  border: 2px solid white;
  border-radius: 8px;
  color: #667eea;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-banner-primary:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-banner-success {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}

.btn-banner-success:hover {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}

/* ==========================================
   Canvas Area für DesignEditor
   ========================================== */

.canvas-area {
  background: var(--app-card-bg, white);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  flex: 1;
  /* ✅ FIX: Volle Breite nutzen, kein min-width constraint */
  width: 100%;
}

.canvas {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5; /* Fallback Farbe */
  margin: 0 auto; /* Zentriere den Canvas */
  /* border-radius wird inline per geometry gesetzt (siehe DesignEditor.jsx) */
}

/* Canvas Element (Text, Bild, QR, Pattern) */
.canvas-element {
  cursor: move;
  user-select: none;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.canvas-element.selected {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.canvas-element:hover {
  border-color: rgba(102, 126, 234, 0.5);
}

/* Grid Intensity Control */
.grid-intensity-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.grid-intensity-control label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--app-text-secondary, #666);
  white-space: nowrap;
}

.grid-intensity-slider {
  width: 80px;
  height: 4px;
  background: var(--app-border, #e0e0e0);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
}

.grid-intensity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--app-accent, #667eea);
  border-radius: 50%;
  cursor: pointer;
}

.grid-intensity-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--app-accent, #667eea);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.grid-intensity-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
  min-width: 35px;
  text-align: right;
}

/* Zoom Controls */
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ==========================================
   Layer Item Styles - Figma/Linear Premium
   ========================================== */

.layer-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem;
  background: var(--app-hover-bg, #f8f9fa);
  border-radius: 10px; /* Slightly larger from 8px */
  cursor: pointer;

  /* Refined border */
  border: 1.5px solid transparent;

  /* Layered shadows */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.02);

  /* Multi-property smooth transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* UX improvements */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.layer-item:hover {
  transform: translateX(2px); /* Subtle slide instead of lift */
  background: var(--app-accent-light, rgba(129, 140, 248, 0.08));
  border-color: var(--app-accent, #818cf8);

  /* Enhanced layered shadow */
  box-shadow:
    0 2px 4px rgba(129, 140, 248, 0.08),
    0 4px 12px rgba(129, 140, 248, 0.12),
    0 0 0 1px rgba(129, 140, 248, 0.1);
}

.layer-item:active {
  transform: translateX(0) scale(0.98);
  transition-duration: 50ms;
}

.layer-item.selected {
  background: var(--app-accent-light, rgba(129, 140, 248, 0.1));
  border-color: var(--app-accent, #818cf8);

  /* Premium ring effect */
  box-shadow:
    0 0 0 3px rgba(129, 140, 248, 0.12),
    0 2px 4px rgba(129, 140, 248, 0.1),
    0 4px 12px rgba(129, 140, 248, 0.15);
}

.layer-item:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(129, 140, 248, 0.2),
    0 2px 4px rgba(129, 140, 248, 0.1);
}

/* No Layers Info */
.no-layers-info {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--app-text-secondary, #666);
}

/* No Selection Info */
.no-selection-info {
  text-align: center;
  padding: 3rem 1.5rem;
}

.info-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.info-text {
  font-size: 0.95rem;
  color: var(--app-text-secondary, #666);
  line-height: 1.6;
}

/* Control Groups für Element Editor */
.control-groups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-label-row label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-text-primary, #2c3e50);
}

.value-display {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-accent, #667eea);
}

/* ==========================================
   Range Slider - Figma/Linear Premium
   ========================================== */

.control-group input[type="range"] {
  width: 100%;
  height: 4px; /* Thinner, more elegant */
  background: var(--app-border, #e2e8f0);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;

  /* Smooth transition */
  transition: background 150ms ease;
}

.control-group input[type="range"]:hover {
  background: var(--app-border, #cbd5e1);
}

.control-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; /* Slightly smaller, more refined */
  height: 16px;
  background: var(--app-accent, #818cf8);
  border-radius: 50%;
  cursor: pointer;

  /* Premium shadow with ring */
  box-shadow:
    0 0 0 4px rgba(129, 140, 248, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(129, 140, 248, 0.2);

  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.control-group input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);

  box-shadow:
    0 0 0 6px rgba(129, 140, 248, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(129, 140, 248, 0.25);
}

.control-group input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.05);
  box-shadow:
    0 0 0 4px rgba(129, 140, 248, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Firefox slider thumb */
.control-group input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--app-accent, #818cf8);
  border-radius: 50%;
  cursor: pointer;
  border: none;

  /* Premium shadow with ring */
  box-shadow:
    0 0 0 4px rgba(129, 140, 248, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(129, 140, 248, 0.2);

  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.control-group input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);

  box-shadow:
    0 0 0 6px rgba(129, 140, 248, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(129, 140, 248, 0.25);
}

/* Editor Header in Element Panel */
.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* ==========================================
   Delete Button - Premium Danger State
   ========================================== */

.btn-delete {
  padding: 0.625rem 1.125rem;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;

  /* Refined border */
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;

  /* Layered shadows */
  box-shadow:
    0 1px 2px rgba(239, 68, 68, 0.08),
    0 0 0 1px rgba(239, 68, 68, 0.04);

  /* Smooth transitions */
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-delete:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
  transform: translateY(-1px) scale(1.02);

  /* Enhanced shadow on hover */
  box-shadow:
    0 2px 4px rgba(239, 68, 68, 0.15),
    0 4px 12px rgba(239, 68, 68, 0.25),
    0 0 0 1px rgba(239, 68, 68, 0.1);
}

.btn-delete:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

.btn-delete:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.2),
    0 2px 4px rgba(239, 68, 68, 0.15);
}

/* ==========================================
   Grouped Design Import Overlay
   ========================================== */

.grouped-design-overlay-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

/* ==========================================
   Canvas Size Configuration
   ========================================== */

.canvas-size-config {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border: 2px solid #e0e7ff;
  border-radius: 8px;
  padding: 12px; /* ✅ FIX: Reduziert von 16px für besseres Layout */
  margin: 12px 0; /* ✅ FIX: Reduziert von 16px */
  box-sizing: border-box; /* ✅ FIX: Sicherstellen dass padding inkludiert ist */
}

.canvas-size-config h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #4f46e5;
}

.size-inputs {
  display: flex;
  align-items: center;
  gap: 6px; /* ✅ FIX: Reduziert von 8px für kompakteres Layout */
  margin-bottom: 8px;
}

.size-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  position: relative; /* ✅ FIX: Für absolute positionierte .unit */
  min-width: 0; /* ✅ FIX: Erlaubt Flexbox-Shrinking */
}

.size-input-group label {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
}

.size-input-group input {
  padding: 6px 28px 6px 6px; /* ✅ FIX: Kompakter Padding für .unit */
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px; /* ✅ FIX: Leicht reduziert von 14px */
  font-weight: 600;
  text-align: center;
  background: white;
  width: 100%; /* ✅ FIX: Volle Breite des Containers */
  box-sizing: border-box; /* ✅ FIX: Padding inkludiert */
}

.size-input-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.size-input-group .unit {
  position: absolute;
  right: 6px; /* ✅ FIX: Näher am Rand, passt zu neuem Padding */
  top: 50%; /* ✅ Positioniert mittig zum Input-Feld */
  transform: translateY(-50%); /* ✅ Zentriert vertikal */
  font-size: 10px; /* ✅ FIX: Leicht kleiner für kompakteres Layout */
  color: #9ca3af;
  font-weight: 500;
  pointer-events: none;
  margin-top: 12px; /* ✅ FIX: Kompensiert für label-Höhe */
}

.size-separator {
  font-size: 18px;
  font-weight: 300;
  color: #9ca3af;
  margin-top: 18px;
}

.size-hint {
  margin: 8px 0 0 0;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

/* Dark Mode */

.dark-mode .canvas-size-config {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
  }

.dark-mode .canvas-size-config h4 {
    color: #818cf8;
  }

.dark-mode .size-input-group label {
    color: #d1d5db;
  }

.dark-mode .size-input-group input {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
  }

.dark-mode .size-input-group input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
  }

.dark-mode .size-hint {
    color: #9ca3af;
  }


/* Apply Size Button */
.btn-apply-size {
  width: 100%;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 12px 0 8px 0;
}

.btn-apply-size.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-apply-size.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-apply-size.disabled {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Dark Mode */

.dark-mode .btn-apply-size.disabled {
    background: #374151;
    border-color: #4b5563;
    color: #6b7280;
  }

/* ==========================================
   Pricing Box - Horizontal Layout
   Breite: links (380px) + mitte (flex) = Optimale Nutzung
   ========================================== */

.panel-price-box-horizontal {
  margin: 0 auto 1.5rem auto;
  max-width: calc(380px + 500px + 1.5rem); /* Links + Mitte (geschätzt) + Gap */
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-radius: 12px;
  border: 1px solid #e9d5ff;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.15);
}

.price-box-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.price-box-main-price {
  flex: 0 0 auto;
}

.price-box-label {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-box-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: #7c3aed;
  line-height: 1;
}

.price-box-breakdown {
  flex: 1 1 auto;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: 0.95rem;
  color: #64748b;
  flex-wrap: wrap;
}

.price-box-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price-box-item-label {
  font-weight: 500;
}

.price-box-item-value {
  font-weight: 600;
  color: #7c3aed;
}

.price-box-actions {
  flex: 0 0 auto;
}

/* Dark Mode */
.dark-mode .panel-price-box-horizontal {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border-color: #374151;
}

.dark-mode .price-box-label,
.dark-mode .price-box-amount {
  color: #a78bfa;
}

.dark-mode .price-box-breakdown {
  color: #9ca3af;
}

.dark-mode .price-box-item-value {
  color: #a78bfa;
}

/* ==========================================
   🎨 SMART RESPONSIVE SYSTEM
   3-Stufen Anpassung für optimalen Canvas-Platz
   ========================================== */

/* ====================================
   PROFESSIONAL RESPONSIVE BREAKPOINTS
   Figma-inspired adaptive layout
   ==================================== */

/* ====================================
   BREAKPOINT 1: Left Panel → Overlay
   < 1400px - Similar to Figma's behavior
   ==================================== */
@media (max-width: 1399px) {
  /* Switch Grid to 2-column layout */
  .placement-workspace {
    grid-template-columns:
      1fr                      /* Canvas takes left space */
      var(--panel-right-width); /* Keep right panel */
  }

  /* Left Panel becomes overlay (slide from right like Figma) */
  .product-selector-sidebar {
    /* Remove from grid flow */
    grid-column: unset;
    grid-row: unset;

    /* Position as overlay */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 85vw);
    z-index: var(--z-overlay);

    /* Styling */
    background: var(--app-card-bg, white);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);

    /* Animation */
    transform: translateX(100%);
    transition: transform var(--transition-duration) var(--transition-smooth);

    /* GPU acceleration */
    will-change: transform;
  }

  /* Panel visible when NOT collapsed */
  .product-selector-sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  /* Backdrop overlay */
  .product-selector-sidebar:not(.collapsed)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
    backdrop-filter: blur(2px);
  }

  /* Center column expands */
  .placement-main-center {
    grid-column: 1;
    min-width: 300px;
  }

  /* Right column stays in place */
  .placement-sidebar-right {
    grid-column: 2;
  }
}

/* Product Config Toolbar (erscheint bei kleineren Bildschirmen UND bei 1280x800) */
.product-config-toolbar {
  display: none; /* Versteckt auf sehr großen Desktops */
}

@media (max-width: 1600px) {
  .product-config-toolbar {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap; /* Buttons wrappen bei sehr wenig Platz */
  }
}

/* ====================================
   BREAKPOINT 2: Right Panel Narrower
   < 1200px - Optimize for smaller screens
   ==================================== */
@media (max-width: 1199px) {
  :root {
    --panel-right-width: 320px; /* Reduce from 360px */
  }

  .placement-workspace {
    padding: 1rem 0.75rem;
  }
}

/* ====================================
   BREAKPOINT 3: Right Panel → Bottom Sheet
   < 900px - Tablet Portrait Mode
   ==================================== */
@media (max-width: 899px) {
  /* Switch to single-column layout */
  .placement-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 0.75rem;
  }

  /* Canvas takes full width */
  .placement-main-center {
    grid-column: 1;
    grid-row: 1;
    min-width: 100%;
  }

  /* Right panel becomes bottom sheet or hidden */
  .placement-sidebar-right {
    /* Could be implemented as bottom sheet later */
    /* For now: hide and use mobile FAB */
    display: none;
  }

  /* Left panel stays as overlay */
  .product-selector-sidebar {
    width: min(360px, 90vw);
  }
}

/* ====================================
   BREAKPOINT 4: Mobile
   < 768px - Phone Landscape/Portrait
   ==================================== */
@media (max-width: 767px) {
  :root {
    --layout-gap: 0.5rem;
    --panel-padding: 0.75rem;
  }

  .placement-workspace {
    padding: 0.5rem;
    height: auto;
    min-height: calc(100vh - var(--layout-total-top-offset));
  }

  /* Canvas full-width, scrollable */
  .placement-main-center {
    min-width: 100%;
    overflow-y: auto;
  }

  /* Overlays at full width on mobile */
  .product-selector-sidebar {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ====================================
   Product Config Toolbar Button Styling
   ==================================== */
.config-btn {
  flex: 1;
  min-width: 150px; /* Mindestbreite pro Button */
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2px solid #dee2e6;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.config-btn:hover {
  border-color: #D4AF7A;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 122, 0.2);
}

.config-btn:active {
  transform: translateY(0);
}

.config-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.config-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.config-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a252f;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark Mode */
.dark-mode .config-btn {
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
  border-color: #404040;
}

.dark-mode .config-btn:hover {
  border-color: #D4AF7A;
}

.dark-mode .config-label {
  color: #9ca3af;
}

.dark-mode .config-value {
  color: #e0e0e0;
}

/* ==========================================
   RESPONSIVE LAYOUT für schmale Bildschirme
   ========================================== */

/* Floating Action Buttons für Mobile */
.mobile-controls-fab {
  position: fixed;
  top: 100px;
  left: 20px;
  z-index: 999;
  display: none; /* Standardmäßig versteckt, nur auf kleinen Bildschirmen */
  flex-direction: column;
  gap: 12px;
}

.fab-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  transition: all 0.3s ease;
}

.fab-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.fab-button:active {
  transform: scale(0.95);
}

/* Mobile Settings Modal */
.mobile-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}

.mobile-settings-content {
  background: var(--app-card-bg, white); /* ✅ Respects theme colors */
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideInDown 0.3s ease;
}

.mobile-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #e5e7eb;
  position: sticky;
  top: 0;
  background: var(--app-card-bg, white); /* ✅ Respects theme colors */
  z-index: 1;
}

.mobile-settings-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #1a252f;
}

.mobile-settings-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mobile-settings-close:hover {
  background: #e5e7eb;
  transform: rotate(90deg);
}

.mobile-settings-body {
  padding: 1.5rem;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   RESPONSIVE COMPONENTS - BASE (Hidden on Desktop)
   ========================================== */

/* Tablet Settings-Bar - versteckt auf Desktop */
.tablet-settings-bar {
  display: none;
}

/* Mobile FAB Container - versteckt auf Desktop */
.mobile-fab-container {
  display: none;
}

/* Mobile Collapsible Box - versteckt auf Desktop */
.mobile-collapsible-box {
  display: none;
}

/* ==========================================
   RESPONSIVE DESIGN - TABLET (768px - 1200px)
   ========================================== */

@media (max-width: 1200px) {
  /* ✅ WICHTIG: Product-Selector Sidebar NICHT mit !important verstecken */
  /* Slide-In Konzept von 1399px Query bleibt aktiv */

  /* ✅ Material-Selector Sidebar auch als Slide-In */
  .material-selector-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    z-index: 9999;
    background: var(--app-card-bg, white); /* ✅ Respects theme colors */
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  /* Material-Sidebar visible when NOT collapsed */
  .material-selector-sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  /* Overlay backdrop when material sidebar is open */
  .material-selector-sidebar:not(.collapsed)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

  /* ⚠️ REMOVED: Old grid overrides that conflicted with professional system
     The professional responsive system at line 5300+ already handles
     proper 2-column layout (Canvas + Right Panel) for screens < 1399px */

  /* ✅ Generic Slide-In Panels (Geometry & Backside) */
  .slide-in-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    z-index: 9999;
    background: var(--app-card-bg, white); /* ✅ Respects theme colors */
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .slide-in-panel.slide-in-right {
    right: 0;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
  }

  .slide-in-panel.slide-in-left {
    left: 0;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
  }

  /* Panel visible when NOT collapsed */
  .slide-in-panel:not(.collapsed) {
    transform: translateX(0);
  }

  /* Overlay backdrop when panel is open */
  .slide-in-panel:not(.collapsed)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

  /* Dark Mode */
  html.dark-mode .slide-in-panel {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%);
    border-left: 2px solid rgba(129, 140, 248, 0.3);
  }
}

/* ==========================================
   RESPONSIVE DESIGN - MOBILE (< 768px)
   ========================================== */

@media (max-width: 768px) {
  /* ✅ Verstecke Tablet Settings-Bar */
  .tablet-settings-bar {
    display: none !important;
  }

  /* ✅ FAB Buttons Container */
  .mobile-fab-container {
    position: fixed;
    top: 80px;
    left: 10px;
    z-index: 100;
    display: flex !important;
    gap: 10px;
    flex-direction: column;
  }

  .fab-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
  }

  .fab-button:hover,
  .fab-button.active {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
  }

  .fab-button:active {
    transform: scale(0.95);
  }

  /* ✅ Collapsible Box (zwischen FABs und Canvas) */
  .mobile-collapsible-box {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    margin: 0 1rem 1rem 1rem;
  }

  .mobile-collapsible-box.open {
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 1rem;
  }

  .collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
  }

  .collapsible-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
  }

  .close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
  }

  .close-btn:hover {
    background: #f3f4f6;
    color: #111827;
  }

  /* ✅ Settings Main Buttons (Material, Formen, Rückseite) */
  .settings-main-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
  }

  .settings-main-buttons button {
    padding: 1rem;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
  }

  .settings-main-buttons button:hover {
    border-color: #667eea;
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
    transform: translateY(-2px);
  }

  .settings-main-buttons button.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
  }

  /* ✅ Sub-Content (Material-Grid, Formen-Auswahl) */
  .settings-sub-content {
    padding: 0 1rem 1rem 1rem;
  }

  .material-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .material-item {
    aspect-ratio: 1;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
  }

  .material-item:hover {
    border-color: #667eea;
    transform: scale(1.05);
  }

  /* ⚠️ REMOVED: Old layout overrides that conflicted with professional system
     The professional responsive system at line 5397 (< 899px) and 5429 (< 767px)
     already handles proper single-column mobile layout using CSS Grid */

  /* ✅ Add Elements horizontal */
  .element-controls {
    order: 4;
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem;
    padding: 0.75rem;
    overflow-x: auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .element-btn {
    min-width: 80px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
  }

  /* ✅ Canvas Controls kompakter */
  .canvas-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: 0.875rem;
  }

  .zoom-controls {
    gap: 0.25rem;
  }

  .zoom-btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .zoom-level {
    font-size: 0.85rem;
    padding: 0 0.5rem;
  }

  .ruler-toggle label {
    font-size: 0.75rem;
  }
}

  .mobile-settings-body {
    padding: 1rem;
  }
}
/* Shared Project View - Elegant Refactor */

.shared-project-view {
  min-height: 100vh;
  background: var(--app-bg);
  display: flex;
  flex-direction: column;
  color: var(--app-text-primary);
}

/* Header */
.shared-header {
  background: var(--app-card-bg);
  box-shadow: none;
  border-bottom: 1px solid var(--app-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.shared-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shared-logo {
  gap: 0.75rem;
}
.shared-logo img {
  height: 32px;
}
.shared-logo span {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text-primary);
}

.btn-header-cta {
  padding: 0.6rem 1.2rem;
  background: var(--app-accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.9rem;
}

.btn-header-cta:hover {
  background: var(--app-accent-hover);
}

/* Main Content */
.shared-main {
  flex: 1;
  padding: 2rem 1.5rem;
}

.shared-container {
  max-width: 960px;
  margin: 0 auto;
}

/* Loading & Error States */
.shared-loading,
.shared-error {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--app-card-bg);
  border-radius: 12px;
  border: 1px solid var(--app-border);
}
.spinner-large {
  border-color: var(--app-border);
  border-top-color: var(--app-accent);
}

/* Title Section */
.shared-title-section {
  text-align: center;
  margin-bottom: 2rem;
}
.shared-title-section h1 {
  font-size: 2rem;
  color: var(--app-text-primary);
}
.shared-subtitle {
  color: var(--app-text-secondary);
  font-size: 1rem;
}
.view-count {
  color: var(--app-accent);
}

/* Preview Section */
.shared-preview-card {
  background: var(--app-card-bg);
  border-radius: 12px;
  border: 1px solid var(--app-border);
  overflow: hidden;
}
.preview-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--app-border);
}
.preview-header h2 {
  font-size: 1.25rem;
  color: var(--app-text-primary);
}
.preview-badge {
  background: var(--app-accent-light);
  color: var(--app-accent);
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 500;
}
.preview-canvas-container {
  padding: 1.5rem;
  background: var(--app-bg);
}

/* Project Info Grid */
.project-info-grid {
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid var(--app-border);
}
.info-label {
  color: var(--app-text-secondary);
}
.info-value {
  color: var(--app-text-primary);
}

/* CTA Section */
.cta-card {
  background: var(--app-accent);
  padding: 2.5rem 2rem;
  border-radius: 12px;
}
.btn-cta-large {
  padding: 0.9rem 2rem;
  background: white;
  color: var(--app-accent);
  font-weight: 600;
}
.cta-hint {
  opacity: 0.8 !important;
}

/* Footer Info */
.shared-footer-info {
  background: var(--app-hover-bg);
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 3px solid var(--app-accent);
}

.shared-footer-info p {
  color: var(--app-text-secondary);
}

/* Footer */
.shared-footer {
  background: var(--app-card-bg);
  color: var(--app-text-secondary);
  padding: 1.5rem 0;
  border-top: 1px solid var(--app-border);
}

.footer-content p {
  color: var(--app-text-secondary);
}
.footer-links a {
  color: var(--app-text-secondary);
}
.footer-links a:hover {
  color: var(--app-accent);
}

/* General Buttons */
.btn-primary {
  background: var(--app-accent);
  color: white;
}
.btn-secondary {
  background: var(--app-card-bg);
  color: var(--app-text-primary);
  border: 1px solid var(--app-border-medium);
}
.btn-secondary:hover {
  background: var(--app-hover-bg);
}
.btn-secondary-link {
  color: var(--app-accent);
}
.btn-secondary-link:hover {
  color: var(--app-accent-hover);
}
/* Shared Marketing Design View Styles - Elegant Refactor */

/* ===== BASE LAYOUT ===== */
.shared-marketing-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  color: var(--app-text-primary);
}

.shared-marketing-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* ===== HEADER ===== */
.shared-marketing-header {
  background: var(--app-card-bg);
  box-shadow: none;
  border-bottom: 1px solid var(--app-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.shared-marketing-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shared-marketing-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.shared-marketing-logo img {
  height: 32px;
}

.shared-marketing-logo span {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--app-text-primary);
}

.btn-header-cta {
  background: var(--app-accent);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 500;
}

.btn-header-cta:hover {
  background: var(--app-accent-hover);
}

/* ===== MAIN CONTENT ===== */
.shared-marketing-main {
  flex: 1;
  padding: 3rem 0;
}

/* ===== WELCOME SECTION ===== */
.shared-marketing-welcome {
  text-align: center;
  margin-bottom: 3rem;
}

.company-greeting {
  display: inline-block;
  background: var(--app-accent-light);
  color: var(--app-accent);
  padding: 0.5rem 1rem;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.shared-marketing-welcome h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--app-text-primary);
  margin-bottom: 1rem;
}

.shared-marketing-subtitle {
  font-size: 1.1rem;
  color: var(--app-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ===== PREVIEW SECTION ===== */
.preview-card {
  background: var(--app-card-bg);
  border-radius: 12px;
  border: 1px solid var(--app-border);
  overflow: hidden;
}

.preview-tabs {
  display: flex;
  border-bottom: 1px solid var(--app-border);
}

.preview-tab {
  flex: 1;
  padding: 1rem;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--app-text-secondary);
  position: relative;
}

.preview-tab.active {
  color: var(--app-accent);
}

.preview-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--app-accent);
}

.preview-image-container {
  background: var(--app-bg);
  padding: 2rem;
}

.preview-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: var(--app-card-shadow);
}

/* ===== ACTION BUTTONS ===== */
.shared-marketing-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}

.btn-action-primary,
.btn-action-claim {
  background: var(--app-accent);
  color: white;
  padding: 0.9rem 1.75rem;
  border-radius: 8px;
  font-size: 1rem;
}

.btn-action-secondary {
  background: var(--app-card-bg);
  color: var(--app-text-primary);
  border: 1px solid var(--app-border-medium);
  padding: 0.9rem 1.75rem;
  border-radius: 8px;
  font-size: 1rem;
}

/* ===== BENEFITS SECTION ===== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.benefit-item {
  background: var(--app-card-bg);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--app-border);
}
.benefit-item h4 {
  color: var(--app-text-primary);
}
.benefit-item p {
  color: var(--app-text-secondary);
}

/* ===== FOOTER ===== */
.shared-marketing-footer {
  background: var(--app-card-bg);
  border-top: 1px solid var(--app-border);
  padding: 1.5rem 0;
}
.footer-links a {
  color: var(--app-text-secondary);
}
.footer-links a:hover {
  color: var(--app-accent);
}

/* ===== LOADING & ERROR STATES ===== */
.shared-marketing-loading,
.shared-marketing-error {
  text-align: center;
  padding: 8rem 1.5rem;
}

.spinner-large {
  border-color: var(--app-border);
  border-top-color: var(--app-accent);
}
.error-actions .btn-primary {
  background: var(--app-accent);
}
.error-actions .btn-secondary {
  background: var(--app-card-bg);
  border-color: var(--app-border-medium);
  color: var(--app-text-primary);
}

/* ===== CLAIM TO PROFILE STYLES ===== */
.claim-success-banner {
  background: var(--app-accent-light);
  border: 1px solid var(--app-accent);
  color: var(--app-accent);
}
.claim-success-content h3, .claim-success-content p {
  color: inherit;
}
.btn-success-primary {
  background: var(--app-accent);
  color: white;
}
.btn-success-secondary {
  background: var(--app-card-bg);
  color: var(--app-accent);
  border: 1px solid var(--app-accent);
}
.claim-error-banner {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* ===== LOGIN MODAL ===== */
.login-modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}
.login-modal {
  background: var(--app-card-bg);
  border: 1px solid var(--app-border);
}
.login-modal-close {
  color: var(--app-text-tertiary);
}
.login-modal-content h2 {
  color: var(--app-text-primary);
}
.login-modal-content > p {
  color: var(--app-text-secondary);
}
.btn-login-google {
  background: var(--app-card-bg);
  color: var(--app-text-primary);
  border-color: var(--app-border-medium);
}
.btn-login-google:hover {
  border-color: #4285f4;
  background: var(--app-hover-bg);
}
.btn-login-email {
  background: var(--app-accent);
}
/**
 * WebhookTestPage Styles
 */

.webhook-test-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px;
}

.test-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.test-header h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
}

.test-header p {
  margin: 0;
  opacity: 0.9;
}

.test-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Left Panel: Input & Controls */
.test-input-panel {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: fit-content;
  position: sticky;
  top: 20px;
}

.input-section {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.input-section:last-child {
  border-bottom: none;
}

.input-section h2 {
  font-size: 16px;
  color: #333;
  margin: 0 0 15px 0;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.input-group input[type="url"],
.input-group input[type="text"],
.input-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.input-group input[type="url"]:focus,
.input-group input[type="text"]:focus,
.input-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-group input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 2px dashed #ddd;
  border-radius: 6px;
  cursor: pointer;
}

.input-group input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  -webkit-appearance: none;
  background: #ddd;
}

.input-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
}

.input-divider {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin: 15px 0;
}

.logo-preview-small {
  margin-top: 10px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 6px;
  text-align: center;
}

.logo-preview-small img {
  max-width: 100%;
  max-height: 100px;
  border-radius: 4px;
}

/* Action Buttons */
.action-buttons h2 {
  margin-bottom: 15px;
}

.step-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.step-btn {
  padding: 10px 15px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.step-btn:hover:not(:disabled) {
  background: #e0e0e0;
  border-color: #ccc;
}

.step-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.full-pipeline-btn {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 10px;
}

.full-pipeline-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.full-pipeline-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.reset-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #666;
  cursor: pointer;
}

.reset-btn:hover {
  background: #f5f5f5;
}

/* Error & Loading */
.error-message {
  margin-top: 15px;
  padding: 12px;
  background: #fff0f0;
  border: 1px solid #ffccc7;
  border-radius: 6px;
  color: #cf1322;
  font-size: 13px;
}

.loading-indicator {
  margin-top: 15px;
  padding: 12px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 6px;
  color: #1890ff;
  font-size: 13px;
  text-align: center;
}

/* Right Panel: Results */
.test-results-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.result-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-card h3 {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #667eea;
  color: #333;
  font-size: 16px;
}

.result-content {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.result-info {
  flex: 1;
  min-width: 200px;
}

.result-info p {
  margin: 8px 0;
  font-size: 13px;
  color: #555;
}

.result-info strong {
  color: #333;
}

.result-info hr {
  margin: 15px 0;
  border: none;
  border-top: 1px dashed #ddd;
}

.result-info ul {
  margin: 5px 0;
  padding-left: 20px;
}

.result-info ul li {
  font-size: 13px;
  color: #555;
  margin: 3px 0;
}

.result-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.result-image img {
  max-width: 200px;
  max-height: 200px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.result-image.large img {
  max-width: 350px;
  max-height: 350px;
}

.result-image span {
  font-size: 12px;
  color: #888;
}

.result-images-compare {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Full Pipeline Result */
.result-card.full-result {
  border: 2px solid #667eea;
}

.pipeline-steps {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pipeline-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 13px;
}

.pipeline-step.success {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.pipeline-step.failed {
  background: #fff1f0;
  border: 1px solid #ffa39e;
}

.pipeline-step .step-number {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #667eea;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}

.pipeline-step .step-status {
  font-weight: bold;
}

.pipeline-step.success .step-status {
  color: #52c41a;
}

.pipeline-step.failed .step-status {
  color: #f5222d;
}

.final-previews {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.final-previews h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 14px;
}

.optimized-logo {
  margin-top: 20px;
}

.optimized-logo h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
}

.optimized-logo img {
  max-width: 150px;
  max-height: 150px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.test-note {
  margin-top: 20px;
  padding: 12px;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 6px;
  font-size: 13px;
  color: #614700;
}

/* Empty State */
.empty-state {
  background: white;
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-state h3 {
  margin: 0 0 15px 0;
  color: #333;
}

.empty-state p {
  margin: 8px 0;
  color: #888;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 900px) {
  .test-layout {
    grid-template-columns: 1fr;
  }

  .test-input-panel {
    position: static;
  }

  .result-content {
    flex-direction: column;
  }

  .result-images-compare {
    justify-content: center;
  }
}
/* Product Selection Page Styles */

.product-selection-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

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

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin: 0 0 10px 0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.page-content {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* OptionsMappingStep Component Styles - Per-Product Options Mapping */

/* ============================================================================
   LOADING & ERROR STATES
   ============================================================================ */

.options-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  min-height: 400px;
  border-radius: 12px;
}

.options-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #c62828;
}

.options-error .error-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

/* ============================================================================
   MAIN LAYOUT
   ============================================================================ */

.options-mapping-step {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  overflow-x: hidden;
}

/* ============================================================================
   HEADER SECTION
   ============================================================================ */

.options-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
  padding: 20px 0;
  margin: -20px 0 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.options-header h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

/* Help Section */
.help-section {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border: 2px solid #667eea;
  border-left: 5px solid #667eea;
  padding: 20px 25px;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.help-section strong,
.help-section p {
  color: #333;
}

.help-section ul {
  margin: 15px 0 0 0;
  padding-left: 0;
  list-style: none !important;
  list-style-type: none !important;
}

.help-section li {
  margin: 12px 0;
  padding: 15px;
  background: white;
  border-radius: 8px;
  border-left: 4px solid #667eea;
  line-height: 1.6;
  color: #333;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  list-style: none !important;
  list-style-type: none !important;
}

.help-section li::before {
  display: none !important;
  content: none !important;
}

.help-section li:last-child {
  border-left-color: #9e9e9e;
}

.option-icon {
  font-size: 32px;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-block;
  text-decoration: none;
  line-height: 1;
}

.option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.option-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.option-title-row strong {
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.option-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.badge-required,
.badge-optional {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
}

.badge-required {
  background: #ffebee;
  color: #c62828;
}

.badge-optional {
  background: #e8f5e9;
  color: #2e7d32;
}

/* Status Summary */
.status-summary {
  background: white;
  border: 2px solid #e0e6ed;
  border-radius: 12px;
  padding: 25px 30px;
  margin-top: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.summary-stats {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-label {
  font-size: 11px;
  color: #8b92a8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.stat-value {
  font-size: 36px;
  color: #2c3e50;
  font-weight: 700;
  line-height: 1;
}

/* Validation Summary */
.validation-summary {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e0e6ed;
}

.validation-warning {
  font-size: 14px;
  color: #f57c00;
  font-weight: 600;
  margin-bottom: 10px;
}

.validation-details {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.validation-item {
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.validation-item.ready {
  background: #e8f5e9;
  color: #2e7d32;
}

.validation-item.incomplete {
  background: #fff3e0;
  color: #f57c00;
}

.validation-item.incompatible {
  background: #ffebee;
  color: #c62828;
}

/* ============================================================================
   PRODUCT GROUPS
   ============================================================================ */

.products-list {
  margin: 30px 0;
}

.product-group {
  margin-bottom: 25px;
  background: white;
  border-radius: 8px;
  border: 2px solid #e0e6ed;
  overflow: hidden;
}

.group-header {
  padding: 15px 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.group-header:hover {
  background: linear-gradient(135deg, #f0f2ff 0%, #f8f9ff 100%);
}

.group-header h4 {
  font-size: 18px;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.group-status {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 12px;
  background: #e8f5e9;
  color: #2e7d32;
}

.group-status.ready {
  background: #e8f5e9;
  color: #2e7d32;
}

.toggle-icon {
  font-size: 14px;
  color: #667eea;
  font-weight: bold;
  transition: transform 0.2s ease;
}

/* Removed duplicate - now defined at top of PRODUCT CARDS section */

/* ============================================================================
   PRODUCT CARDS
   ============================================================================ */

/* Grid Layout for products without options */
.group-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 15px;
  background: #fafbfc;
}

/* Override grid for products WITH options (keep them single column) */
.group-content:has(.product-card.with-options) {
  grid-template-columns: 1fr;
}

.product-card {
  background: white;
  border: 2px solid #e0e6ed;
  border-radius: 8px;
  margin-bottom: 0;  /* Removed since grid handles spacing */
  transition: all 0.2s ease;
}

.product-card.no-options {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 2px solid #5568d3;
  color: white;
}

.product-card.with-options:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.product-card.ready {
  border-color: #4caf50;
  background: #f1f8f4;
}

.product-card.incompatible {
  border-color: #f44336;
  background: #fff5f5;
}

/* Product Header */
.product-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-bottom: 1px solid #f0f2f5;
}

.options-mapping-step .product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.product-info {
  flex: 1;
  min-width: 0;
}

.product-title {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  margin: 0 0 5px 0;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-options-count {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.existing-options {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}

/* Product Status Badges */
.product-status-badge {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid transparent;
  letter-spacing: 0.3px;
}

.product-status-badge.ready {
  background: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

.product-status-badge.incomplete {
  background: #fff3cd;
  color: #856404;
  border-color: #ffeaa7;
}

.product-status-badge.incompatible {
  background: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

/* ============================================================================
   PRODUCT CONFIGURATION
   ============================================================================ */

.product-config {
  padding: 20px;
}

.config-description {
  font-size: 14px;
  color: #666;
  margin: 0 0 15px 0;
  font-weight: 500;
}

/* Incompatible Warning */
.incompatible-warning {
  background: #ffebee;
  border: 2px solid #f44336;
  border-radius: 6px;
  padding: 12px 15px;
  margin-bottom: 15px;
  color: #c62828;
  font-size: 14px;
  line-height: 1.6;
}

/* Option Rows (for products without options) */
.option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #f9fafb;
  border-radius: 6px;
  margin-bottom: 10px;
  border: 1px solid #e0e6ed;
}

.option-row.backside-toggle {
  background: #fff8e1;
  border-color: #ffd54f;
}

.option-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.option-value {
  font-size: 13px;
  color: #667eea;
  font-weight: 500;
}

/* Toggle Label */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
}

.toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.toggle-label span {
  user-select: none;
}

/* Option Configuration (for products with options) */
.option-config {
  margin-bottom: 20px;
}

.option-config:last-child {
  margin-bottom: 0;
}

.option-label.required::after {
  content: "";
  /* Pflicht is already in the label */
}

.option-label {
  display: block;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  margin-bottom: 8px;
}

.option-input {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Dropdown and Input Styling */
.option-input select,
.action-dropdown,
.details-dropdown {
  flex: 1;
  min-width: 200px;
  padding: 10px 15px;
  font-size: 15px;
  border: 2px solid #e0e6ed;
  border-radius: 6px;
  background: white;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.details-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 15px;
  font-size: 15px;
  border: 2px solid #e0e6ed;
  border-radius: 6px;
  background: white;
  color: #333;
  transition: all 0.2s ease;
}

.option-input select:hover:not(:disabled),
.action-dropdown:hover:not(:disabled),
.details-dropdown:hover:not(:disabled),
.details-input:hover:not(:disabled) {
  border-color: #667eea;
}

.option-input select:focus,
.action-dropdown:focus,
.details-dropdown:focus,
.details-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.option-input select:disabled,
.action-dropdown:disabled,
.details-dropdown:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f5f7fa;
}

.btn-create-new {
  padding: 10px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-create-new:hover:not(:disabled) {
  background: #5568d3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-create-new:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #9e9e9e;
}

/* Toggle Checkbox */
.toggle-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 10px;
}

.toggle-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.toggle-checkbox span {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  user-select: none;
}

/* Option Hints */
.option-hint {
  font-size: 13px;
  color: #666;
  margin-top: 8px;
  padding: 8px 12px;
  background: #e3f2fd;
  border-radius: 4px;
  border-left: 3px solid #2196f3;
}

.option-hint.success {
  background: #e8f5e9;
  border-left-color: #4caf50;
  color: #2e7d32;
}

.option-hint.info {
  background: #e3f2fd;
  border-left-color: #2196f3;
  color: #1565c0;
}

.option-hint.warning {
  background: #fff3e0;
  border-left-color: #ff9800;
  color: #e65100;
}

.option-hint.error {
  background: #ffebee;
  border-left-color: #f44336;
  color: #c62828;
}

/* Status Messages */
.status-message {
  margin-top: 15px;
  padding: 12px 15px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
}

.status-message.warning {
  background: #fff3e0;
  border: 1px solid #ffa726;
  color: #e65100;
}

.status-message.error {
  background: #ffebee;
  border: 1px solid #f44336;
  color: #c62828;
}

.status-message.success {
  background: #e8f5e9;
  border: 1px solid #4caf50;
  color: #2e7d32;
}

.status-message small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.9;
}

/* ============================================================================
   SLOT VISUALIZATION
   ============================================================================ */

.slot-visualization {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border: 2px solid #e3f2fd;
  border-radius: 8px;
  padding: 15px 20px;
  margin: 15px 0;
}

.slot-title {
  font-size: 13px;
  font-weight: 600;
  color: #1565c0;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slot {
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.slot.filled {
  background: #e8f5e9;
  border: 1px solid #4caf50;
  color: #2e7d32;
}

.slot.planned {
  background: #fff3e0;
  border: 1px solid #ff9800;
  color: #e65100;
}

.slot.empty {
  background: #f5f5f5;
  border: 1px dashed #bdbdbd;
  color: #757575;
}

/* ============================================================================
   OPTION COUNT COLOR CODING
   ============================================================================ */

.option-count-hint.green {
  background: #e8f5e9;
  border-left-color: #4caf50;
  color: #2e7d32;
}

.option-count-hint.yellow {
  background: #fff3e0;
  border-left-color: #ff9800;
  color: #e65100;
}

.option-count-hint.red {
  background: #ffebee;
  border-left-color: #f44336;
  color: #c62828;
}

/* ============================================================================
   INFO BOXES
   ============================================================================ */

.info-box {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  padding: 20px 25px;
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
  border-radius: 8px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.mapping-explainer {
  margin-top: 30px;
}

.info-icon {
  font-size: 48px;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(0%) contrast(1.5) brightness(0.7) saturate(1.2);
  font-weight: 900;
}

.info-content {
  font-size: 14px;
  color: #1565c0;
  line-height: 1.6;
  flex: 1;
  margin-top: 0;
}

.info-content strong {
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
}

.info-content p {
  margin: 8px 0;
}

.info-content ul {
  margin: 10px 0 0 0;
  padding-left: 0;
  list-style: none;
}

.info-content li {
  margin: 5px 0;
}

/* ============================================================================
   STEP ACTIONS
   ============================================================================ */

.step-actions {
  display: flex;
  justify-content: flex-start;  /* Für margin-left: auto Trick */
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #e0e6ed;
}

/* Button-Fixes für perfektes Alignment */
.step-actions .btn-primary,
.step-actions .btn-secondary {
  flex: 0 0 auto !important;
  min-width: 120px;
  max-width: 200px;
  margin: 0 !important;  /* Verhindert Y-Versatz */
}

.step-actions .btn-secondary {
  border: 2px solid #d0d0d0 !important;
}

.step-actions .btn-primary {
  margin-left: auto !important;
  max-width: 300px;
  border: 2px solid transparent !important;  /* Gleiche Höhe wie Secondary */
}

/* Allgemeine Button-Styles */
.btn-primary,
.btn-secondary {
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  line-height: 1.5;
  min-height: 48px;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover:not(:disabled) {
  background: #f8f9ff;
  transform: translateY(-2px);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================================
   PRODUCT CARD WITHOUT OPTIONS - MODERN DESIGN
   ============================================================================ */

.product-header-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
}

.product-main-info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.product-image-large {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  border: 2px solid #e0e6ed;
}

.product-details {
  flex: 1;
}

.product-title-clean {
  font-size: 16px;
  color: white;
  font-weight: 600;
  margin: 0 0 8px 0;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-auto-config {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.95);
  display: block;
  font-weight: 500;
}

/* Modern Toggle Switch */
.backside-toggle-modern {
  display: flex;
  align-items: center;
  gap: 10px;
}

.options-toggles {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-end;
  margin-left: 25px;
}

.toggle-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.toggle-label-text {
  font-size: 14px;
  font-weight: 500;
  color: white;
  user-select: none;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 52px;
  height: 28px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
  background: rgba(255, 255, 255, 0.9);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
  background: #667eea;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(24px);
}

.toggle-switch:hover .toggle-slider {
  background: rgba(255, 255, 255, 0.4);
}

.toggle-switch input[type="checkbox"]:checked:hover + .toggle-slider {
  background: rgba(255, 255, 255, 1);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
  /* Single column on mobile */
  .group-content {
    grid-template-columns: 1fr !important;
  }

  .summary-stats {
    flex-direction: column;
    gap: 15px;
  }

  .validation-details {
    flex-direction: column;
    gap: 8px;
  }

  .product-header {
    flex-wrap: wrap;
  }

  .options-mapping-step .product-image {
    width: 50px;
    height: 50px;
  }

  .option-input {
    flex-direction: column;
    align-items: stretch;
  }

  .option-input select,
  .btn-create-new {
    width: 100%;
  }

  .step-actions {
    flex-direction: column;
  }

  /* Buttons bleiben mit max-width kontrolliert, kein width: 100% */

  .group-header h4 {
    font-size: 16px;
  }

  .options-header h3 {
    font-size: 20px;
  }
}
/* Options Mapping Page Styles */

.options-mapping-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

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

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin: 0 0 10px 0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.page-content {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Branding Page Styles */

.branding-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

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

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin: 0 0 10px 0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.page-content {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Settings Page Styles */

.settings-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
}

.page-header {
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin: 0 0 10px 0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.settings-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 25px;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border-bottom: 2px solid #e0e6ed;
}

.section-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.section-info h2 {
  font-size: 24px;
  color: #333;
  margin: 0 0 5px 0;
}

.section-info p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.section-content {
  padding: 25px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.setting-label h3 {
  font-size: 18px;
  color: #333;
  margin: 0 0 8px 0;
}

.setting-label p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.setting-actions {
  flex-shrink: 0;
}

.btn-reset {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-reset:hover:not(:disabled) {
  background: #ff5252;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.btn-reset:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.confirm-warning {
  font-size: 13px;
  color: #ff6b6b;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.btn-confirm-reset {
  background: #ff5252;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-confirm-reset:hover:not(:disabled) {
  background: #ff3838;
  transform: translateY(-1px);
}

.btn-confirm-reset:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-cancel {
  background: #e0e0e0;
  color: #333;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-cancel:hover:not(:disabled) {
  background: #d0d0d0;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 600;
  color: #666;
  font-size: 14px;
}

.info-value {
  color: #333;
  font-size: 14px;
}

.info-value a {
  color: #667eea;
  text-decoration: none;
}

.info-value a:hover {
  text-decoration: underline;
}
/* ==========================================
   New App Architecture - Tab Navigation
   ========================================== */

:root {
  /* Premium Color System - Professional & Modern */
  --app-bg: #f9fafb;  /* Lighter, cleaner background */
  --app-bg-white: #ffffff;
  --app-text-primary: #111827;  /* Sharper black for better readability */
  --app-text-secondary: #6b7280;  /* Balanced gray */
  --app-text-tertiary: #9ca3af;  /* Lighter gray for subtle text */
  --app-border: #e5e7eb;  /* Clean, modern border */
  --app-border-medium: #d1d5db;
  --app-card-bg: #ffffff;
  --app-card-gradient: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  --app-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);

  /* Modern Accent Colors - Indigo/Purple gradient (Fine-tuned for better vibrancy) */
  --app-accent: #5851e8;  /* Slightly more vibrant indigo */
  --app-accent-hover: #4a42d1;
  --app-accent-light: #eef2ff;
  --app-accent-gradient: linear-gradient(135deg, #5851e8 0%, #8f5cf6 100%);
  --app-hover-bg: #f3f4f6;

  /* Logo Filter - Schwarz im Light Mode */
  --logo-filter: brightness(0) saturate(100%);

  /* Info-Box */
  --info-box-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
  --info-box-border: rgba(79, 70, 229, 0.2);
}

/* Dark Mode - Angepasst an neues Schema */

.dark-mode {
  --app-bg: #0f172a;  /* Sehr dunkles Slate */
  --app-bg-white: #1e293b;
  --app-text-primary: #f8fafc;  /* Sehr hell für Kontrast */
  --app-text-secondary: #cbd5e1;
  --app-text-tertiary: #94a3b8;
  --app-border: #334155;
  --app-border-medium: #475569;
  --app-card-bg: #1e293b;  /* Solide Basis-Farbe */
  --app-card-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);  /* Dunkleres Gradient */
  --app-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --app-accent: #868cf8;  /* Slightly more vibrant violet for Dark Mode */
  --app-accent-light: #1e293b;
  --app-hover-bg: #2d3a4f;

  /* Logo Filter - Weiß im Dark Mode */
  --logo-filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));

  /* Info-Box Dark Mode */
  --info-box-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.12) 100%);
  --info-box-border: rgba(102, 126, 234, 0.35);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--app-bg);
  min-height: 100vh;
  color: var(--app-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main Container */

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--app-bg);
}

/* Header with Tab Navigation - Modern Premium Design */

.app-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid var(--app-border);
  z-index: 100;
  position: sticky;
  top: 0;
  isolation: isolate;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode .app-header {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--app-border);
}

.dark-mode .header-brand {
  border-bottom: 1px solid var(--app-border, #334155);
}

.dark-mode .header-logo-img {
  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.4))
    drop-shadow(0 2px 4px rgba(255, 255, 255, 0.2));
  opacity: 1;
}

.dark-mode .header-logo-img:hover {
  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 0 8px rgba(129, 140, 248, 0.8))
    drop-shadow(0 2px 6px rgba(129, 140, 248, 0.4));
}

.dark-mode .header-brand h1 {
  color: var(--app-text-primary, #f8fafc);
  filter: none;
}

.dark-mode .main-tabs {
  background: transparent;
  border-bottom-color: var(--app-border);
}

.dark-mode .tab-button {
  color: var(--app-text-secondary);
}

.dark-mode .tab-button:hover {
  color: var(--app-text-primary);
  background: transparent;
}

.dark-mode .tab-button.active {
  color: var(--app-accent);
  background: transparent;
}

.dark-mode .tab-button::before {
  background: var(--app-accent);
}

.dark-mode .tab-badge {
  background: rgba(129, 140, 248, 0.15);
  color: var(--app-accent);
}

.dark-mode .tab-button.active .tab-badge {
  background: var(--app-accent);
  color: white;
}

.header-brand {
  padding: 1.25rem 2rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-brand-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

.header-logo-img {
  height: 38px;
  width: 38px;
  object-fit: contain;
  /* Dunkle Farben für Logo im Light Mode */
  filter:
    brightness(0)
    drop-shadow(0 0 6px rgba(0, 0, 0, 0.2))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.8;
  cursor: pointer;
}

.header-logo-img:hover {
  transform: scale(1.08) rotate(-5deg);
  filter:
    brightness(0)
    drop-shadow(0 0 12px rgba(102, 126, 234, 0.6))
    drop-shadow(0 0 24px rgba(102, 126, 234, 0.4));
  opacity: 1;
}

.header-brand h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, #2c3e50 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease;
}

.header-brand h1:hover {
  transform: scale(1.02);
}

.header-brand .header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-right: 5.5rem; /* Platz für Dark Mode Toggle */
}

/* Tab Navigation - Professional Design (Notion/Linear/Vercel inspired) */

.main-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid var(--app-border);
  position: relative;
  width: 100%;
}

.tab-button {
  position: relative;
  flex: 1; /* Gleichmäßige Verteilung über die Breite */
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-text-secondary);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center; /* Zentriere Inhalt */
  gap: 0.5rem;
  margin-bottom: -1px; /* Overlap border */
  letter-spacing: -0.01em;
}

.tab-button:hover {
  color: var(--app-text-primary);
  background: transparent;
}

.tab-button::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--app-accent);
  transform: scaleX(0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-button:hover::before {
  transform: scaleX(0.5);
}

.tab-button.active {
  color: var(--app-accent);
  font-weight: 600;
  background: transparent;
}

.tab-button.active::before {
  transform: scaleX(1);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: var(--app-accent-light);
  color: var(--app-accent);
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

.tab-button.active .tab-badge {
  background: var(--app-accent);
  color: white;
}

.cart-tab.has-items {
  color: #ff9800;
}

.cart-tab.has-items .cart-badge {
  background: #ff9800;
  color: white;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Main Content - LIGHT MODE */

.app-main {
  flex: 1;
  overflow-y: auto;
  background: var(--app-bg);
  position: relative;
}

.app-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(129, 140, 248, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Main Content - DARK MODE */

.dark-mode .app-main {
  background:
    radial-gradient(ellipse at top left, rgba(129, 140, 248, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #16213e 100%);
}

.dark-mode .app-main::before {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(129, 140, 248, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(102, 126, 234, 0.02) 0%, transparent 50%);
}

/* Products Start View */

.products-start-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 2rem;
}

.start-content {
  text-align: center;
  max-width: 600px;
}

.start-content h2 {
  font-size: 2rem;
  color: var(--app-text-primary);
  margin-bottom: 1rem;
}

.start-content p {
  font-size: 1.1rem;
  color: var(--app-text-secondary);
  margin-bottom: 2rem;
}

.quick-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.btn-large {
  padding: 1.25rem 2.5rem;
  font-size: 1.15rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #667eea;
  color: white;
}

/* Light Mode: Besserer Kontrast für Secondary Buttons */

:root:not(.dark-mode) .btn-secondary {
    background: #f5f5f5;
    color: #2d3748;
    border: 2px solid #d0d0d0;
  }

:root:not(.dark-mode) .btn-secondary:hover {
    background: #e0e0e0;
    color: #1a202c;
    border-color: #a0aec0;
  }

.recent-designs-hint {
  padding: 1.5rem;
  background: var(--app-hover-bg);
  border-radius: 12px;
  margin-top: 2rem;
}

.hint-text {
  color: var(--app-text-secondary);
  font-size: 1rem;
}

.hint-text strong {
  color: var(--app-accent);
}

/* Cart View */

.cart-view {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.cart-header {
  margin-bottom: 2rem;
}

.cart-header h2 {
  font-size: 2rem;
  color: var(--app-text-primary);
  margin-bottom: 0.5rem;
}

.cart-count {
  color: var(--app-text-secondary);
  font-size: 1.05rem;
}

/* Empty Cart */

.empty-cart {
  text-align: center;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-cart .empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.empty-cart h3 {
  font-size: 1.5rem;
  color: var(--app-text-primary);
  margin-bottom: 0.5rem;
}

.empty-cart p {
  color: var(--app-text-secondary);
  margin-bottom: 2rem;
}

.empty-cart .btn-primary {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
}

/* Cart Items */

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  background: var(--app-card-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--app-card-shadow);
}

.item-preview {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--app-hover-bg);
  flex-shrink: 0;
}

.item-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
}

.item-info h4 {
  margin: 0 0 0.5rem 0;
  color: var(--app-text-primary);
  font-size: 1.15rem;
}

.item-details {
  color: var(--app-text-secondary);
  font-size: 0.95rem;
}

.btn-remove {
  padding: 0.5rem 1rem;
  background: #ffebee;
  color: #e74c3c;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.2s;
}

.btn-remove:hover {
  background: #e74c3c;
  color: white;
}

.cart-actions {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--app-border);
}

.btn-checkout {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
}

.btn-checkout:hover {
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
}

/* Footer - LIGHT MODE */

.app-footer {
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-top: 1px solid var(--app-border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 5;
}

.footer-stats {
  display: flex;
  gap: 2rem;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--app-text-secondary);
  font-weight: 500;
}

.footer-stats span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(102, 126, 234, 0.08);
  border-radius: 20px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  color: var(--app-text-primary);
}

.footer-stats span:hover {
  background: rgba(102, 126, 234, 0.12);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

/* Footer - DARK MODE */

.dark-mode .app-footer {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-top: 1px solid rgba(129, 140, 248, 0.2);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.dark-mode .footer-stats {
  color: rgba(129, 140, 248, 0.8);
}

.dark-mode .footer-stats span {
  background: rgba(129, 140, 248, 0.1);
  border: 1px solid rgba(129, 140, 248, 0.2);
  color: rgba(129, 140, 248, 0.9);
}

.dark-mode .footer-stats span:hover {
  background: rgba(129, 140, 248, 0.15);
  border-color: rgba(129, 140, 248, 0.3);
}

/* Responsive */

@media (max-width: 768px) {
  .header-logo-img {
    height: 35px;
  }

  .header-brand h1 {
    font-size: 1.3rem;
  }

  .main-tabs {
    overflow-x: auto;
    padding: 0 1rem;
  }

  .tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .quick-actions {
    flex-direction: column;
  }

  .btn-large {
    width: 100%;
  }

  .cart-item {
    flex-direction: column;
    text-align: center;
  }

  .cart-actions {
    flex-direction: column;
  }

  .footer-stats {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }
}

/* Button Utilities */

.btn-block {
  width: 100%;
}

button {
  font-family: inherit;
}

button:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Scrollbar Styling */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--app-text-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--app-text-secondary);
}

/* Admin Button */

.header-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-back-to-shop {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  border: 2px solid rgba(102, 126, 234, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}

.btn-back-to-shop:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.5);
}

.btn-back-to-shop:active {
  transform: translateY(0) scale(1);
}

.dark-mode .btn-back-to-shop {
  background: rgba(0, 0, 0, 0.3);
  color: var(--app-accent, #818cf8);
  border: 2px solid rgba(129, 140, 248, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-back-to-shop:hover {
  box-shadow: 0 6px 16px rgba(129, 140, 248, 0.5);
  background: rgba(129, 140, 248, 0.2);
  border-color: rgba(129, 140, 248, 0.6);
}

.btn-help {
  background: var(--app-card-bg, #ffffff);
  color: var(--app-text-secondary, #475569);
  border: 1.5px solid var(--app-border, #e2e8f0);
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-help:hover {
  background: var(--app-hover-bg, #f1f5f9);
  border-color: var(--app-accent, #667eea);
  color: var(--app-accent, #667eea);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.15);
}

.btn-help:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-mode .btn-help {
  background: var(--app-card-bg, #1e293b);
  color: var(--app-text-secondary, #cbd5e1);
  border-color: var(--app-border, #334155);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-help:hover {
  background: var(--app-hover-bg, #2d3a4f);
  border-color: var(--app-accent, #818cf8);
  color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 6px rgba(129, 140, 248, 0.2);
}

.btn-admin {
  background: var(--app-card-bg, #ffffff);
  color: var(--app-text-secondary, #475569);
  border: 1.5px solid var(--app-border, #e2e8f0);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-admin:hover {
  background: var(--app-hover-bg, #f1f5f9);
  border-color: var(--app-accent, #667eea);
  color: var(--app-accent, #667eea);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.15);
}

/* Exit User View Button - Distinct but minimal styling */

.btn-admin-exit-user-view {
  background: var(--app-accent-light, #e0e7ff);
  color: var(--app-accent, #667eea);
  border: 1.5px solid var(--app-accent, #667eea);
  font-weight: 600;
  gap: 0.5rem;
}

.btn-admin-exit-user-view:hover {
  background: var(--app-accent, #667eea);
  color: white;
  border-color: var(--app-accent, #667eea);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.btn-admin:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-mode .btn-admin {
  background: var(--app-card-bg, #1e293b);
  color: var(--app-text-secondary, #cbd5e1);
  border-color: var(--app-border, #334155);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-admin:hover {
  background: var(--app-hover-bg, #2d3a4f);
  border-color: var(--app-accent, #818cf8);
  color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 6px rgba(129, 140, 248, 0.2);
}

/* Dark mode adjustments for exit button */

.dark-mode .btn-admin-exit-user-view {
  background: rgba(129, 140, 248, 0.2);
  color: var(--app-accent, #818cf8);
  border-color: var(--app-accent, #818cf8);
}

.dark-mode .btn-admin-exit-user-view:hover {
  background: var(--app-accent, #818cf8);
  color: white;
  border-color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
}

.btn-shortcuts {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  border: 2px solid rgba(102, 126, 234, 0.3);
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-shortcuts:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.5);
}

.btn-shortcuts:active {
  transform: translateY(0) scale(1);
}

.dark-mode .btn-shortcuts {
  background: rgba(0, 0, 0, 0.3);
  color: var(--app-accent, #818cf8);
  border: 2px solid rgba(129, 140, 248, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-shortcuts:hover {
  box-shadow: 0 6px 16px rgba(129, 140, 248, 0.5);
  background: rgba(129, 140, 248, 0.2);
  border-color: rgba(129, 140, 248, 0.6);
}

/* Button Styles - Dark Mode */

.dark-mode .btn-primary {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.3) 0%, rgba(129, 140, 248, 0.2) 100%);
  color: var(--app-accent, #818cf8);
  border: 2px solid rgba(129, 140, 248, 0.5);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.2);
}

.dark-mode .btn-primary:hover {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.4) 0%, rgba(129, 140, 248, 0.3) 100%);
  border-color: rgba(129, 140, 248, 0.7);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
  transform: translateY(-2px);
}

.dark-mode .btn-secondary {
  background: rgba(26, 26, 46, 0.8);
  color: rgba(129, 140, 248, 0.95);
  border: 2px solid rgba(129, 140, 248, 0.4);
}

.dark-mode .btn-secondary:hover {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.25) 0%, rgba(129, 140, 248, 0.15) 100%);
  color: var(--app-accent, #818cf8);
  border-color: rgba(129, 140, 248, 0.6);
}

/* Shortcuts Modal */

.shortcuts-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 2rem;
  animation: fadeIn 0.3s ease;
}

.shortcuts-modal {
  background: #1a1a2e;
  border-radius: 24px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(129, 140, 248, 0.2);
  max-width: 700px;
  width: 90%;
  max-height: 85vh;
  overflow: hidden;
  animation: slideUp 0.4s ease;
}

.shortcuts-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
  padding: 1.5rem 2rem;
  border-bottom: 2px solid rgba(129, 140, 248, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shortcuts-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 0%, var(--app-accent, #818cf8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-close-shortcuts {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(129, 140, 248, 0.3);
  color: var(--app-accent, #818cf8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close-shortcuts:hover {
  background: rgba(129, 140, 248, 0.3);
  border-color: var(--app-accent, #818cf8);
  transform: rotate(90deg);
}

.shortcuts-content {
  padding: 2rem;
  max-height: calc(85vh - 80px);
  overflow-y: auto;
}

.shortcuts-section {
  margin-bottom: 2rem;
}

.shortcuts-section:last-child {
  margin-bottom: 0;
}

.shortcuts-section h3 {
  color: var(--app-accent, #818cf8);
  font-size: 1.1rem;
  margin: 0 0 1rem 0;
  font-weight: 600;
}

.shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.shortcut-item:hover {
  background: rgba(129, 140, 248, 0.1);
  border-color: rgba(129, 140, 248, 0.4);
}

.shortcut-item kbd {
  background: linear-gradient(135deg, #2a2a3e 0%, #1f1f2e 100%);
  border: 2px solid rgba(129, 140, 248, 0.3);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-accent, #818cf8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  min-width: 3rem;
  text-align: center;
}

.shortcut-item span {
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}

.shortcut-coming-soon .shortcut-item {
  opacity: 0.6;
}

.shortcut-coming-soon .shortcut-item kbd {
  border-color: rgba(150, 150, 150, 0.3);
  color: #999;
}

.shortcut-coming-soon .shortcut-item span {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Dark Mode Button Styles for Admin Panel */

.dark-mode .btn-primary {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.9) 0%, rgba(129, 140, 248, 0.7) 100%);
  color: #1a1a2e;
  border: 2px solid rgba(129, 140, 248, 0.4);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}

.dark-mode .btn-primary:hover {
  background: linear-gradient(135deg, var(--app-accent, #818cf8) 0%, rgba(129, 140, 248, 0.8) 100%);
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 6px 16px rgba(129, 140, 248, 0.5);
  transform: translateY(-2px);
}

.dark-mode .btn-secondary {
  background: rgba(129, 140, 248, 0.1);
  color: rgba(129, 140, 248, 0.9);
  border: 2px solid rgba(129, 140, 248, 0.3);
  font-weight: 600;
}

.dark-mode .btn-secondary:hover {
  background: rgba(129, 140, 248, 0.2);
  border-color: rgba(129, 140, 248, 0.5);
  color: var(--app-accent, #818cf8);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
}

/* Base Styles */

:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  display: flex;
  min-width: 320px;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text-primary);
}

#root {
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

a {
  color: var(--app-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  font-family: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/**
 * GLOBAL FORCE LIGHT MODE
 * Erzwingt Light Mode für die GESAMTE App während Development
 * TODO: Entfernen wenn echter Dark Mode implementiert wird
 */

/* Erzwinge Light Mode auf Root-Ebene */
html,
body,
#root,
.app {
  color-scheme: light !important;
  background: #ffffff !important;
  color: #212529 !important;
}

/* Überschreibe Browser/OS Dark Mode Präferenz */
@media (prefers-color-scheme: dark) {
  html,
  body,
  #root,
  .app,
  * {
    color-scheme: light !important;
  }
}

/* Deaktiviere Dark Mode Klassen global */
html.dark-mode,
body.dark-mode,
.dark-mode {
  /* Setze alle zurück auf Light Mode Werte */
  color-scheme: light !important;
}

/* Polaris Theme Override */
html.p-theme-dark,
body.p-theme-dark {
  color-scheme: light !important;
}