:root {
    /* ===== Modern Color Palette ===== */
    --primary: hsl(21, 100%, 50%);
    --primary-hover: hsl(21, 100%, 44%);
    --primary-light: hsl(21, 100%, 95%);
    --accent: hsl(280, 85%, 60%);
    --accent-hover: hsl(280, 85%, 52%);
    --success: hsl(142, 71%, 45%);
    --success-light: hsl(142, 71%, 95%);
    --warning: hsl(38, 92%, 50%);
    --warning-light: hsl(38, 92%, 95%);
    --danger: hsl(0, 72%, 51%);
    --danger-light: hsl(0, 72%, 95%);
    --info: hsl(199, 89%, 48%);
    --info-light: hsl(199, 89%, 95%);

    /* ===== Gradients ===== */
    --gradient-primary: linear-gradient(135deg, hsl(21, 100%, 50%), hsl(28, 100%, 55%));
    --gradient-success: linear-gradient(135deg, hsl(142, 71%, 45%), hsl(158, 64%, 52%));
    --gradient-warning: linear-gradient(135deg, hsl(38, 92%, 50%), hsl(45, 93%, 47%));
    --gradient-danger: linear-gradient(135deg, hsl(0, 72%, 51%), hsl(14, 100%, 57%));
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));

    /* ===== Shadows ===== */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* ===== Transitions ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ===== Spacing ===== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ===== Border Radius ===== */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ===== Light Mode Colors ===== */
    --bg-primary: hsl(0, 0%, 100%);
    --bg-secondary: hsl(0, 0%, 98%);
    --bg-tertiary: hsl(0, 0%, 95%);
    --text-primary: hsl(220, 13%, 18%);
    --text-secondary: hsl(220, 9%, 46%);
    --text-tertiary: hsl(220, 9%, 66%);
    --border-color: hsl(220, 13%, 91%);
    --border-color-hover: hsl(220, 13%, 80%);
}

/* ===== Dark Mode ===== */
.dark {
    /* Superfícies dark neutras, sem tonalidade azulada e sem preto puro. */
    --bg-primary: #242424;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #363636;
    --text-primary: hsl(0, 0%, 95%);
    --text-secondary: hsl(0, 0%, 70%);
    --text-tertiary: hsl(0, 0%, 50%);
    --border-color: hsl(220, 13%, 28%);
    --border-color-hover: hsl(220, 13%, 35%);

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* ===== Utility Classes ===== */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-effect {
    background: rgba(36, 36, 36, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ========================================================================= */
/* UNIFICAÇÃO GLOBAL DO MODO ESCURO (ESTILO MuvCar / GROWTH CENTER)         */
/* Força todas as telas a seguirem o mesmo padrão escuro e elegante          */
/* ========================================================================= */

.dark .dark\:bg-gray-800,
.dark .dark\:bg-slate-800,
.dark .dark\:bg-zinc-800,
.dark .dark\:bg-\[\#2d2c2e\],
.dark .dark\:bg-\[\#3a393b\] {
    background-color: #242424 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.72) !important;
}

.dark .dark\:bg-gray-900,
.dark .dark\:bg-slate-900,
.dark .dark\:bg-zinc-900,
.dark .dark\:bg-slate-950,
.dark .dark\:bg-gray-950,
.dark .dark\:bg-\[\#1e1e1e\] {
    background-color: transparent !important;
}

.dark .dark\:bg-gray-700,
.dark .dark\:bg-slate-700 {
    background-color: #2d2d2d !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Campos de Input e Select dentro dos cards escuros */
.dark input.dark\:bg-gray-700,
.dark select.dark\:bg-gray-700,
.dark textarea.dark\:bg-gray-700,
.dark input.dark\:bg-gray-800,
.dark select.dark\:bg-gray-800,
.dark textarea.dark\:bg-gray-800,
.dark input.bg-gray-700,
.dark select.bg-gray-700,
.dark textarea.bg-gray-700,
.dark input.bg-gray-800,
.dark select.bg-gray-800,
.dark textarea.bg-gray-800 {
    background-color: #2d2d2d !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Card Styles */
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.card:hover {
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-md);
}

.card-elevated {
    box-shadow: var(--shadow-lg);
}

.card-elevated:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color-hover);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-danger {
    background: var(--gradient-danger);
    color: white;
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* Input Styles */
.input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: all var(--transition-base);
}

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

.input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.dark .input:focus {
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.2);
}

/* Badge Styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

.badge-primary {
    background: var(--primary-light);
    color: var(--primary);
}

.badge-success {
    background: var(--success-light);
    color: var(--success);
}

.badge-warning {
    background: var(--warning-light);
    color: var(--warning);
}

.badge-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.badge-info {
    background: var(--info-light);
    color: var(--info);
}

/* Animation Classes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse-yellow-glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(255, 165, 0, 0.4);
        border-color: rgba(255, 165, 0, 0.5);
    }
    50% { 
        box-shadow: 0 0 25px rgba(255, 215, 0, 1);
        border-color: rgba(255, 215, 0, 1);
        background-color: rgba(255, 255, 0, 0.1);
    }
}

.animate-pulse-yellow {
    animation: pulse-yellow-glow 1.5s ease-in-out infinite !important;
}

.animate-fade-in {
    animation: fadeIn var(--transition-base) ease-out;
}

.animate-slide-in-up {
    animation: slideInUp var(--transition-base) ease-out;
}

.animate-slide-in-down {
    animation: slideInDown var(--transition-base) ease-out;
}

.animate-scale-in {
    animation: scaleIn var(--transition-base) ease-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Hover Effects */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
}

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg,
            var(--bg-secondary) 0%,
            var(--bg-tertiary) 50%,
            var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
}

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

/* Focus Visible */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ===== Safe Area Insets (PWA Mobile) ===== */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
}

/* Full-height that accounts for safe areas and dynamic viewport */
.safe-h-screen {
    height: 100dvh;
    height: 100vh; /* fallback for older browsers */
}

@supports (height: 100dvh) {
    .safe-h-screen {
        height: 100dvh;
    }
}

.safe-min-h-screen {
    min-height: 100dvh;
    min-height: 100vh; /* fallback */
}

@supports (min-height: 100dvh) {
    .safe-min-h-screen {
        min-height: 100dvh;
    }
}

/* Safe area padding utilities */
.safe-pt {
    padding-top: var(--sat);
}

.safe-pb {
    padding-bottom: var(--sab);
}

.safe-pl {
    padding-left: var(--sal);
}

.safe-pr {
    padding-right: var(--sar);
}

.safe-px {
    padding-left: var(--sal);
    padding-right: var(--sar);
}

.safe-py {
    padding-top: var(--sat);
    padding-bottom: var(--sab);
}

.safe-p {
    padding-top: var(--sat);
    padding-right: var(--sar);
    padding-bottom: var(--sab);
    padding-left: var(--sal);
}

/* Safe area top offset for fixed/absolute elements */
.safe-top {
    top: var(--sat);
}

/* Standalone PWA detection — when running as installed app, status bar overlaps */
@media all and (display-mode: standalone) {
    .pwa-safe-pt {
        padding-top: var(--sat);
    }
}

/* ===== Modern Glassmorphism & Themed UI ===== */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .glass-panel {
    background: rgba(36, 36, 36, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-panel:hover {
    border-color: rgba(203, 213, 225, 0.9);
}

.dark .glass-panel:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

/* Fundo de página compartilhado: mantém a identidade Beauty em todas as verticais. */
.app-background-mesh {
    background-image:
        radial-gradient(at 0% 0%, hsla(28, 100%, 74%, 0.4) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(189, 100%, 56%, 0.3) 0, transparent 50%);
}

.dark .app-background-mesh {
    background-image:
        radial-gradient(at 0% 0%, rgba(255, 90, 0, 0.16) 0, transparent 48%),
        radial-gradient(at 100% 0%, rgba(16, 185, 165, 0.14) 0, transparent 52%);
}

/* Vidro escuro dos cards legados, equivalente às superfícies da Beauty. */
.dark [class~="dark:bg-[#2d2c2e]"],
.dark [class~="dark:bg-[#3a393b]"] {
    background-color: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

/* Themed Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-track {
    background: #181818;
}
.dark ::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* Glow effects */
.glow-primary {
    box-shadow: 0 0 25px -5px rgba(255, 90, 0, 0.35);
}
.glow-success {
    box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.35);
}
.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));flex:0 0 auto;overflow:hidden;padding:var(--yarl__thumbnails_container_padding,16px);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__thumbnails_vignette{pointer-events:none;position:absolute;--yarl__thumbnails_vignette_size:12%}@media (min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media (min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);height:100%;left:0;right:0}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);bottom:0;top:0;width:100%}.yarl__thumbnails_track{gap:var(--yarl__thumbnails_thumbnail_gap,16px);outline:none}.yarl__thumbnails_thumbnail{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border-color:var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);border-style:var(--yarl__thumbnails_thumbnail_border_style,solid);border-width:var(--yarl__thumbnails_thumbnail_border,1px);cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent;box-sizing:content-box;height:var(--yarl__thumbnails_thumbnail_height,80px);outline:none;overflow:hidden;padding:var(--yarl__thumbnails_thumbnail_padding,4px);position:relative;width:var(--yarl__thumbnails_thumbnail_width,120px)}.yarl__thumbnails_thumbnail_active{border-color:var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff))}.yarl__thumbnails_thumbnail_fadein{animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards;opacity:0}.yarl__thumbnails_thumbnail_fadeout{animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;cursor:unset}.yarl__thumbnails_thumbnail_placeholder{cursor:unset;visibility:hidden}.yarl__thumbnails_thumbnail:focus{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail:focus:not(:focus-visible){box-shadow:unset}.yarl__thumbnails_thumbnail:focus-visible{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));height:var(--yarl__thumbnails_thumbnail_icon_size,32px);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--yarl__thumbnails_thumbnail_icon_size,32px)}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}.yarl__counter{bottom:var(--yarl__counter_bottom,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));left:var(--yarl__counter_left,0);line-height:var(--yarl__counter_line_height,var(--yarl__icon_size,32px));margin:var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));padding:var(--yarl__counter_padding,var(--yarl__button_padding,8px));position:var(--yarl__counter_position,absolute);right:var(--yarl__counter_right,unset);top:var(--yarl__counter_top,0);-webkit-user-select:var(--yarl__counter_user_select,none);-moz-user-select:var(--yarl__counter_user_select,none);user-select:var(--yarl__counter_user_select,none)}[dir=rtl] .yarl__counter{left:var(--yarl__counter_rtl_left,unset);right:var(--yarl__counter_rtl_right,0)}.print-choice-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.print-choice-modal {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.print-choice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.print-choice-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #2d2c2e;
}

.print-choice-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.print-choice-close:hover {
    background: #f5f5f5;
    color: #666;
}

.print-choice-info {
    background: #f8f9fa;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.print-choice-info strong {
    color: #ff5a00;
    font-weight: 600;
}

.print-choice-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.print-choice-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.print-choice-option:hover {
    border-color: #ff5a00;
    background: #fff5f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.1);
}

.print-choice-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.print-choice-content {
    flex: 1;
}

.print-choice-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d2c2e;
    margin-bottom: 4px;
}

.print-choice-description {
    font-size: 13px;
    color: #666;
}

.print-choice-footer {
    display: flex;
    justify-content: center;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.print-choice-cancel {
    padding: 10px 24px;
    background: #f5f5f5;
    border: none;
    border-radius: 6px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.print-choice-cancel:hover {
    background: #e0e0e0;
    color: #333;
}

/* Responsive */
@media (max-width: 600px) {
    .print-choice-modal {
        width: 95%;
        padding: 20px;
    }

    .print-choice-option {
        padding: 12px;
    }

    .print-choice-icon {
        font-size: 28px;
    }

    .print-choice-title {
        font-size: 15px;
    }

    .print-choice-description {
        font-size: 12px;
    }
}