.layout-header-wrapper[data-v-6249abb3] {
    width: 100%
}

.gradientBot[data-v-8bb40ef2] {
    box-shadow: 0 4px 0 0 var(--active-gradient-border)
}

@media(min-width: 1280px) {
    .gradientBot[data-v-8bb40ef2] {
        border-radius:10px 0 0 10px;
        box-shadow: 0 1px 4px #505050,-4px 0 0 0 var(--active-gradient-border)
    }

    .sticky-promotion[data-v-8bb40ef2],.sticky-promotions-wrapper[data-v-8bb40ef2] {
        display: flex;
        flex-direction: column
    }

    .sticky-promotions-wrapper[data-v-8bb40ef2] {
        align-items: center;
        border-radius: 40px 0 0 40px;
        gap: 16px;
        justify-content: center;
        padding: 16px;
        width: 140px
    }
}

.layout-banner-wrapper[data-v-2714ce61] {
    width: 100%
}

.banner-loading[data-v-2714ce61] {
    align-items: center;
    background: var(--BG-Surface-Lighter);
    display: flex;
    height: 200px;
    justify-content: center
}

.loading-spinner[data-v-2714ce61] {
    animation: spin-2714ce61 1s linear infinite;
    border: 3px solid var(--primary);
    border-radius: 50%;
    border-top: 3px solid transparent;
    height: 32px;
    width: 32px
}

@keyframes spin-2714ce61 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes moveX-da058355 {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(var(--move-x))
    }
}

.recent-big-win[data-v-da058355] {
    --move-x: -85rem;
    animation: moveX-da058355 20s linear infinite
}
@keyframes moveX-da058355 {
  from {
    transform: translateX(0); /* เริ่มที่จุดซ้ายสุด */
  }
  to {
    transform: translateX(-100%); /* เลื่อนออกไปจนหมดความกว้างตัวเอง */
  }
}

.text-label-wrapper[data-v-da058355] {
    background: linear-gradient(90deg,var(--BG-Surface-Lighter) 0,var(--BG-Surface-Darker) 100%);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 32px
    
}


.jackpot-carousel-wrapper[data-v-da058355] {
    background: radial-gradient(50% 50% at 50% 50%,var(--Card-Lighter,#25272c) 0,var(--Card-Darker,#0d0e10) 100%);
    width: 100%
}

.jackpot-card[data-v-da058355] {
    align-items: center;
    background: #1e1e1e;
    border-radius: 8px;
    color: #fff;
    display: flex;
    gap: 12px;
    padding: 12px 16px
}

.game-thumb img[data-v-da058355] {
    border-radius: 4px;
    height: 48px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 48px
}

.jackpot-info[data-v-da058355] {
    display: flex;
    flex-direction: column
}

.player[data-v-da058355] {
    font-size: 14px;
    font-weight: 600
}

.amount[data-v-da058355] {
    color: #f9c74f;
    font-size: 16px
}

.footer-wrapper {
    background: linear-gradient(180deg,var(--BG-Surface-Lighter) 0,var(--BG-Surface-Darker) 100%);
    box-shadow: 0 4px 0 0 var(--Main-Secondary) inset
}

.footer-no-bg {
    background: none!important;
    box-shadow: none!important
}

.card-pwa-install {
    background: var(--custom-btn-secondary-bg);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: 0 0 4px #00000040;
    box-shadow: var(--btn-box-shadow);
    margin: 0 10px;
    padding: 10px
}

.modal-title[data-v-5f385a34] {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600
}

.tabs-wrapper[data-v-5f385a34] {
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 24px
}

.tab-button[data-v-5f385a34] {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    gap: 8px;
    padding: 8px 16px;
    transition: all .2s;
    white-space: nowrap
}

.tab-button.active[data-v-5f385a34] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff
}

.tab-button[data-v-5f385a34]:hover:not(.active) {
    background: var(--bg-surface);
    color: var(--text-primary)
}

.variants-container[data-v-5f385a34] {
    flex: 1;
    height: 100%;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 24px 24px 144px
}

.variant-section[data-v-5f385a34] {
    width: 100%
}

.section-title[data-v-5f385a34] {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px
}

.variants-grid[data-v-5f385a34] {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr))
}

.variant-card[data-v-5f385a34] {
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all .2s
}

.variant-card[data-v-5f385a34]:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px #0000001a;
    transform: translateY(-2px)
}

.variant-card.active[data-v-5f385a34] {
    background: var(--primary-bg);
    border-color: var(--primary)
}

.variant-thumbnail[data-v-5f385a34] {
    align-items: center;
    aspect-ratio: 16/9;
    background: var(--bg-surface-darker);
    display: flex;
    justify-content: center;
    position: relative
}

.thumbnail-placeholder[data-v-5f385a34] {
    color: var(--text-secondary)
}

.active-indicator[data-v-5f385a34] {
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    position: absolute;
    right: 8px;
    top: 8px
}

.variant-info[data-v-5f385a34] {
    padding: 12px
}

.variant-name[data-v-5f385a34] {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px
}

.variant-description[data-v-5f385a34] {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4
}

.theme-category[data-v-5f385a34] {
    background: linear-gradient(135deg,#f8f9fa,#e9ecef);
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    margin-bottom: 40px;
    padding: 20px
}

.theme-category[data-v-5f385a34]:last-child {
    margin-bottom: 0
}

.theme-category-title[data-v-5f385a34] {
    align-items: center;
    border-bottom: 2px solid #dee2e6;
    color: #1f2937;
    display: flex;
    font-size: 20px;
    font-weight: 800;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px
}

@media(min-width: 640px) {
    .theme-category-title[data-v-5f385a34] {
        font-size:22px
    }
}

.theme-section[data-v-5f385a34] {
    margin-bottom: 24px
}

.theme-section[data-v-5f385a34]:last-child {
    margin-bottom: 0
}

.theme-section-title[data-v-5f385a34] {
    align-items: center;
    color: #4b5563;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 8px;
    margin-bottom: 12px;
    padding-left: 8px
}

.theme-section-title[data-v-5f385a34]:before {
    background: linear-gradient(180deg,#3b82f6,#8b5cf6);
    border-radius: 2px;
    content: "";
    height: 16px;
    width: 4px
}

@media(min-width: 640px) {
    .theme-section-title[data-v-5f385a34] {
        font-size:17px;
        margin-bottom: 16px
    }
}

.theme-card-simple[data-v-5f385a34] {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: all .2s ease
}

.theme-card-simple[data-v-5f385a34]:hover {
    border-color: #9ca3af;
    box-shadow: 0 4px 12px #0000001a
}

.theme-card-simple.active[data-v-5f385a34] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px #3b82f633
}

.theme-card-simple.active .active-check[data-v-5f385a34] {
    opacity: 1
}

.theme-color-bar[data-v-5f385a34] {
    border-radius: 10px 10px 0 0;
    display: flex;
    height: 56px;
    overflow: hidden
}

@media(min-width: 640px) {
    .theme-color-bar[data-v-5f385a34] {
        height:64px
    }
}

.theme-color-bar .color-segment[data-v-5f385a34] {
    flex: 1;
    min-width: 0
}

.theme-content[data-v-5f385a34] {
    background: #fafafa;
    padding: 12px;
    position: relative;
    text-align: center
}

@media(min-width: 640px) {
    .theme-content[data-v-5f385a34] {
        padding:14px 16px
    }
}

.active-check[data-v-5f385a34] {
    align-items: center;
    background: #3b82f6;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px #3b82f666;
    color: #fff;
    display: flex;
    height: 28px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 8px;
    top: -20px;
    transition: opacity .2s ease;
    width: 28px
}

.theme-name[data-v-5f385a34] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px
}

@media(min-width: 640px) {
    .theme-name[data-v-5f385a34] {
        font-size:14px
    }
}

.theme-name.text-dark[data-v-5f385a34] {
    color: #1f2937
}

.theme-name.text-light[data-v-5f385a34] {
    color: #fff
}

.theme-desc[data-v-5f385a34] {
    font-size: 11px
}

@media(min-width: 640px) {
    .theme-desc[data-v-5f385a34] {
        font-size:12px
    }
}

.theme-desc.text-dark-muted[data-v-5f385a34] {
    color: #6b7280
}

.theme-desc.text-light-muted[data-v-5f385a34] {
    color: #ffffffb3
}

.modal-footer[data-v-5f385a34] {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 12px;
    padding: 16px 24px
}

.spacer[data-v-5f385a34] {
    flex: 1
}

.action-button[data-v-5f385a34] {
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    transition: all .2s
}

.action-button.cancel[data-v-5f385a34] {
    background: var(--bg-surface);
    color: var(--text-primary)
}

.action-button.cancel[data-v-5f385a34]:hover {
    background: var(--bg-surface-darker)
}

.action-button.reset[data-v-5f385a34] {
    background: var(--warning);
    color: #fff
}

.action-button.reset[data-v-5f385a34]:hover {
    background: var(--warning-dark)
}

.action-button.apply[data-v-5f385a34] {
    background: var(--primary);
    color: #fff
}

.action-button.apply[data-v-5f385a34]:hover {
    background: var(--primary-dark)
}

.color-section .subsection-title[data-v-5f385a34] {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    margin-top: 24px
}

.color-section .subsection-title[data-v-5f385a34]:first-child {
    margin-top: 0
}

.color-presets[data-v-5f385a34] {
    margin-bottom: 32px
}

.color-presets .presets-grid[data-v-5f385a34] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill,minmax(120px,1fr))
}

.color-presets .preset-card[data-v-5f385a34] {
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    padding: 12px;
    transition: all .2s
}

.color-presets .preset-card[data-v-5f385a34]:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px #0000001a;
    transform: translateY(-2px)
}

.color-presets .preset-preview[data-v-5f385a34] {
    display: flex;
    gap: 2px;
    height: 20px;
    margin-bottom: 8px
}

.color-presets .color-swatch[data-v-5f385a34] {
    border-radius: 2px;
    flex: 1;
    min-width: 0
}

.color-presets .preset-name[data-v-5f385a34] {
    color: var(--text-primary);
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-align: center
}

.custom-colors .color-controls[data-v-5f385a34] {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr))
}

.custom-colors .color-control[data-v-5f385a34] {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.custom-colors .color-label[data-v-5f385a34] {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500
}

.custom-colors .color-input-group[data-v-5f385a34] {
    align-items: center;
    display: flex;
    gap: 8px
}

.custom-colors .color-picker[data-v-5f385a34] {
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    height: 40px;
    padding: 0;
    width: 40px
}

.custom-colors .color-picker[data-v-5f385a34]::-webkit-color-swatch-wrapper {
    padding: 0
}

.custom-colors .color-picker[data-v-5f385a34]::-webkit-color-swatch {
    border: 2px solid var(--border);
    border-radius: 4px
}

.custom-colors .color-text[data-v-5f385a34] {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    flex: 1;
    font-family: monospace;
    font-size: 14px;
    padding: 8px 12px
}

.custom-colors .color-text[data-v-5f385a34]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px #3b82f61a;
    outline: none
}

header[data-v-506e405a] {
    text-align: center
}

header.navigation[data-v-506e405a] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: -1px;
    position: sticky;
    top: 0;
    z-index: 999
}

header.navigation a[data-v-506e405a] {
    margin: 0 5px;
    text-decoration: none
}

header.navigation a.logo[data-v-506e405a] {
    font-size: 1.5em;
    line-height: 1;
    margin: 0 10px 0 0;
    padding: 0
}

main[data-v-506e405a] {
    display: grid;
    gap: 10px
}

main aside[data-v-506e405a],main section[data-v-506e405a] {
    padding-bottom: 50px
}

main aside>div[data-v-506e405a],main aside>ol[data-v-506e405a] {
    position: sticky;
    top: 130px
}

@media(min-width: 768px) {
    main aside>div[data-v-506e405a],main aside>ol[data-v-506e405a] {
        position:sticky;
        position: -webkit-sticky;
        top: 140px
    }
}

main aside>div a[data-v-506e405a],main aside>ol a[data-v-506e405a] {
    display: inline-block;
    text-decoration: none
}

main aside ol[data-v-506e405a],main aside ul[data-v-506e405a] {
    list-style: none
}

main aside ul li>ul[data-v-506e405a] {
    padding-left: 10px
}

main aside.sidebar-left[data-v-506e405a] {
    font-size: 1.8rem
}

main aside.sidebar-left ol>li>a[data-v-506e405a] {
    font-size: 2rem;
    font-weight: 400;
    margin: 10px 0
}

main aside.sidebar-right ul[data-v-506e405a]:first-child {
    padding-left: 15px
}

.customize-button[data-v-506e405a] {
    align-items: center;
    background: linear-gradient(135deg,#667eea,#764ba2);
    border: 2px solid hsla(0,0%,100%,.3);
    border-radius: 50%;
    bottom: 200px;
    box-shadow: 0 4px 15px #667eea66;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    position: fixed;
    right: 16px;
    transition: all .3s;
    width: 44px;
    z-index: 999
}

.customize-button[data-v-506e405a]:hover {
    box-shadow: 0 6px 20px #667eea80;
    transform: scale(1.1)
}

.customize-button[data-v-506e405a]:active {
    transform: scale(.95)
}

.scroll-to-top-btn[data-v-506e405a] {
    cursor: pointer;
    display: inline-flex;
    position: absolute;
    right: 20px
}

.aff-input-section[data-v-506e405a] {
    margin-bottom: 8px
}

.input-with-copy[data-v-506e405a] {
    align-items: center;
    background: var(--Input-default,rgba(0,0,0,.3));
    border: 1px solid var(--Input-stroke,#393535);
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    width: 100%
}

.aff-label[data-v-506e405a] {
    font-size: 16px;
    font-weight: 500;
    padding-left: 12px
}

.aff-label[data-v-506e405a],.link-input[data-v-506e405a] {
    color: var(--Text-Icon-Title);
    white-space: nowrap
}

.link-input[data-v-506e405a] {
    flex: 1;
    font-size: 14px;
    min-width: 0;
    outline: none;
    overflow: hidden;
    padding: 12px 16px;
    text-overflow: ellipsis
}

.copy-btn[data-v-506e405a],.link-input[data-v-506e405a] {
    background: transparent;
    border: none
}

.copy-btn[data-v-506e405a] {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    transition: background .2s;
    width: 48px
}

.copy-btn[data-v-506e405a]:hover {
    background: #ffffff1a
}

.copy-btn[data-v-506e405a]:active {
    background: #fff3
}

.copy-icon[data-v-506e405a] {
    color: var(--text-icon-title);
    height: 20px;
    width: 20px
}

.mobile-aff-row[data-v-506e405a] {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 8px
}

@media(min-width: 768px) {
    .mobile-aff-row[data-v-506e405a] {
        display:none
    }
}

.mobile-aff-row .input-with-copy[data-v-506e405a] {
    flex: 1
}

.contact-btn[data-v-506e405a] {
    align-items: center;
    background: var(--Card-Normal,#fff);
    border: .5px solid var(--Main-Secondary);
    border-radius: 4px;
    color: var(--Text-Icon-Highlight);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 4px;
    height: 48px;
    justify-content: center;
    padding: 4px 12px;
    transition: all .2s;
    white-space: nowrap
}

.contact-btn[data-v-506e405a]:hover {
    opacity: .9
}

.contact-btn[data-v-506e405a]:active {
    transform: scale(.98)
}

.contact-icon[data-v-506e405a] {
    color: var(--Text-Icon-Highlight,#d9202e);
    height: 24px;
    width: 24px
}

.contact-icon[data-v-506e405a] svg {
    height: 24px;
    width: 24px
}

    .splide__pagination__page.is-active {
    background: #ffffff00;
    transform: scale(1.4);
    z-index: 1;
}
.splide__pagination__page {
    background: #cccccc00;
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin: 3px;
    opacity: .7;
    padding: 0;
    position: relative;
    transition: transform .2s linear;
    width: 8px;
}

/* Animation สำหรับการเลื่อนเข้าจากขวา */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slideInRight 0.5s ease-out forwards;
}
.font-medium {
    font-weight: 400;
    color: #fff;
}


/* สร้าง Animation เลื่อนจากขวา */
@keyframes slideRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* คลาสที่จะเอาไปแปะให้ Modal */
.modal-slide-in {
    animation: slideRight 0.4s ease-out forwards;
}


    :root {
--color-primary-50: 240 253 244;
--color-primary-100: 220 252 231; 
--color-primary-200: 187 247 208;
--color-primary-300: 134 239 172;
--color-primary-400: 74 222 128;
--color-primary-500: 34 197 94;
--color-primary-600: 22 163 74;
--color-primary-700: 21 128 61;
--color-primary-800: 22 101 52;
--color-primary-900: 20 83 45;
--color-primary-950: 5 46 22;
--color-primary-DEFAULT: var(--color-primary-500);

--color-gray-50: 249 250 251;
--color-gray-100: 243 244 246;
--color-gray-200: 229 231 235;
--color-gray-300: 209 213 219;
--color-gray-400: 156 163 175;
--color-gray-500: 107 114 128;
--color-gray-600: 75 85 99;
--color-gray-700: 55 65 81;
--color-gray-800: 31 41 55;
--color-gray-900: 17 24 39;
--color-gray-950: 3 7 18;
}

.dark {
  --color-primary-DEFAULT: var(--color-primary-400);
}

   .vue3-marquee{display:flex!important;position:relative}.vue3-marquee.horizontal{overflow-x:hidden!important;flex-direction:row!important;width:100%;height:max-content}.vue3-marquee.vertical{overflow-y:hidden!important;flex-direction:column!important;height:100%;width:max-content}.vue3-marquee:hover>
      .marquee{animation-play-state:var(--pauseOnHover)}.vue3-marquee:active>
      .marquee{animation-play-state:var(--pauseOnClick)}.vue3-marquee>
      .marquee{flex:0 0 auto;min-width:var(--min-width);min-height:var(--min-height);z-index:1;animation:var(--orientation) var(--duration) linear var(--delay) var(--loops);animation-play-state:var(--pauseAnimation);animation-direction:var(--direction)}.vue3-marquee.horizontal>
      .marquee{display:flex;flex-direction:row;align-items:center}.vue3-marquee.vertical>
      .marquee{display:flex;flex-direction:column;align-items:center}@keyframes scrollX{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes scrollY{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.vue3-marquee>
      .overlay{position:absolute;width:100%;height:100%}.vue3-marquee>
      .transparent-overlay{position:absolute;width:100%;height:100%}.vue3-marquee>
      .overlay:before,.vue3-marquee>
      .overlay:after{content:"";position:absolute;z-index:2}.vue3-marquee.horizontal>
      .overlay:before,.vue3-marquee.horizontal>
      .overlay:after{background:linear-gradient(to right,var(--gradient-color));height:100%;width:var(--gradient-length)}.vue3-marquee.vertical>
      .overlay:before,.vue3-marquee.vertical>
      .overlay:after{background:linear-gradient(to bottom,var(--gradient-color));height:var(--gradient-length);width:100%}.vue3-marquee.horizontal>
      .overlay:after{transform:rotate(180deg)}.vue3-marquee.vertical>
      .overlay:after{transform:rotate(-180deg)}.vue3-marquee>
      .overlay:before{left:0;top:0}.vue3-marquee.horizontal>
      .overlay:after{right:0;top:0}.vue3-marquee.vertical>
      .overlay:after{left:0;bottom:0}

    .lottie-animation-container{width:var(--lottie-animation-container-width);height:var(--lottie-animation-container-height);background-color:var(--lottie-animation-container-background-color);overflow:hidden;margin:var(--lottie-animation-margin)}.lottie-animation-container svg{transform:scale(var(--lottie-animation-scale))}
    

      [data-sonner-toaster][dir=ltr],html[dir=ltr]{--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}[data-sonner-toaster][dir=rtl],html[dir=rtl]{--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}[data-sonner-toaster]{position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999}[data-sonner-toaster][data-x-position=right]{right:max(var(--offset),env(safe-area-inset-right))}[data-sonner-toaster][data-x-position=left]{left:max(var(--offset),env(safe-area-inset-left))}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-sonner-toaster][data-y-position=top]{top:max(var(--offset),env(safe-area-inset-top))}[data-sonner-toaster][data-y-position=bottom]{bottom:max(var(--offset),env(safe-area-inset-bottom))}[data-sonner-toast]{--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);touch-action:none;will-change:transform,opacity,height;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[data-sonner-toast][data-styled=true]{padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-sonner-toast] [data-description]{font-weight:400;line-height:1.4;color:inherit}[data-sonner-toast] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}[data-sonner-toast][data-promise=true] [data-icon]>
      svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast] [data-icon]>
      *{flex-shrink:0}[data-sonner-toast] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast] [data-content]{display:flex;flex-direction:column;gap:2px;transform:translateZ(0)}[data-sonner-toast] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}[data-sonner-toast] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-sonner-toast][data-theme=dark] [data-cancel]{background:rgba(255,255,255,.3)}[data-sonner-toast] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--gray1);color:var(--gray12);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]:before{content:'';position:absolute;left:0;right:0;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]:before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]:before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]:before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast]:after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>
      *{transition:opacity .4s}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>
      *{opacity:0}[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]:before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount,0));transition:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation:swipe-out .2s ease-out forwards}@keyframes swipe-out{from{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));opacity:1}to{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));opacity:0}}@media (max-width:600px){[data-sonner-toaster]{position:fixed;--mobile-offset:16px;right:var(--mobile-offset);left:var(--mobile-offset);width:100%}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - 32px)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset)}[data-sonner-toaster][data-y-position=bottom]{bottom:20px}[data-sonner-toaster][data-y-position=top]{top:20px}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset);right:var(--mobile-offset);transform:none}}[data-sonner-toaster][data-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 91%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 91%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 91%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-theme=dark]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 100%, 12%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 12%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-rich-colors=true] [data-sonner-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true] [data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true] [data-sonner-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true] [data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true] [data-sonner-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true] [data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true] [data-sonner-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true] [data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.sonner-loading-bar,[data-sonner-toast],[data-sonner-toast]>
      *{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}
    

   .page-enter-active,
        .page-leave-active {
          transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
        }

        .page-enter-from {
          opacity: 0;
          transform: translate3d(15px, 0, 0);
        }

        .page-leave-to {
          opacity: 0;
          transform: translate3d(-15px, 0, 0);
        }

        .layout-enter-active,
        .layout-leave-active {
          transition: all 0.25s ease;
        }

        .layout-enter-from,
        .layout-leave-to {
          opacity: 0;
        }

        /* Loading state for instant feedback */
        .route-loading {
          position: relative;
        }

        .route-loading::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, transparent, var(--primary), transparent);
          animation: loading-bar 1s ease-in-out infinite;
          z-index: 9999;
        }

        @keyframes loading-bar {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }