/* ============================================
   OUTEC ROOM DEMO SYSTEM - Temporary Branding
   ============================================ */

:root {
  --ui-page-bg: var(--background-color, #f8fafc);
  --ui-surface: var(--surface-color, #ffffff);
  --ui-text: var(--color-text, #0f172a);
  --ui-text-muted: var(--muted-text-color, #64748b);
  --ui-border: var(--border-color, #e2e8f0);
  --ui-primary: var(--primary-color, #2563eb);
  --ui-primary-hover: var(--primary-hover, #1d4ed8);
  --ui-accent: var(--accent-color, #06b6d4);
  --ui-success: var(--success-color, #16a34a);
  --ui-danger: var(--danger-color, #dc2626);
  --ui-warning: var(--warning-color, #f59e0b);
  --ui-radius-sm: 8px;
  --ui-radius-md: 10px;
  --ui-radius-lg: 12px;
  --ui-shadow-soft: 0 14px 32px rgba(15, 23, 42, 0.08);
  --ui-shadow-card: 0 18px 45px rgba(15, 23, 42, 0.10);

  /* Surfaces */
  --bg-color: var(--ui-page-bg);
  --bg-dark: var(--header-background, var(--ui-text));
  --bg-darker: var(--ui-text);
  --card-bg: var(--card-background, var(--ui-surface));
  --card-bg-hover: var(--ui-surface);
  --surface-elevated: var(--ui-surface);

  /* Text */
  --text-secondary: var(--ui-text-muted);
  --text-muted: var(--ui-text-muted);
  --text-on-dark: var(--footer-text-color, #f8fafc);
  --text-on-primary: var(--button-text-color, #ffffff);
  --text-primary: var(--ui-text);

  /* Borders & Dividers */
  --border-light: var(--ui-border);
  --divider: color-mix(in srgb, var(--ui-border) 70%, transparent);
  --status-warning-color: var(--warning-color, #f59e0b);
}

/* =========================
   HEADER (AUTO HEIGHT) + LOGO
   Desktop: logo centrado
   Tablet/Móvil: logo izquierda
   ========================= */

/* Header Overrides - Demo Theme */
.main-header {
  background: var(--header-background);
  border-bottom: 1px solid var(--border-color);
  height: auto !important; /* por si en el theme base hay height fijo */
  top: 0 !important;
  z-index: 10010;
}

.main-header.scrolled {
  background: var(--header-background);
}

/* 3 columnas: nav | logo | acciones (DESKTOP) */
.main-header .container{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;

  /* Auto-height (crece con el logo) */
  min-height: unset !important;
  height: auto !important;
  padding: 14px 0;
}

/* Alineaciones por columna */
.main-nav{ justify-self: start; }
.logo{ justify-self: center; display:flex; align-items:center; justify-content:center; padding: 4px 0; }
.header-actions{ justify-self: end; }

.header-actions .mobile-only.nav-icon {
  display: none !important;
}

@media (max-width: 1024px) {
  .header-actions .desktop-only.nav-icon,
  .header-actions .desktop-only.user-menu {
    display: none !important;
  }

  .header-actions .mobile-only.nav-icon {
    display: inline-flex !important;
  }
}

/* Logo text fallback */
.logo h1,
.logo h1 a {
  color: var(--secondary-color) !important;
}

/* Logo imagen (controlado) */
.logo img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-height: 120px !important; /* Desktop */
}

/* Tablet */
@media (max-width: 1024px){
  .logo img{
    max-height: 120px !important;
  }
}

/* Móvil */
@media (max-width: 768px){
  .logo img{
    max-height: 80px !important;
  }
}


/* =========================
   NAVIGATION LINKS
   ========================= */
.main-nav a {
  color: var(--nav-link-color) !important;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--nav-link-hover) !important;
}

.main-nav a::after {
  background: var(--accent-color);
}

/* =========================
   BUTTONS
   ========================= */
.btn-primary {
  background: var(--primary-color);
  color: var(--button-text-color);
  border-radius: var(--border-radius);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--gradient-secondary);
  color: var(--button-text-color);
  border-radius: var(--border-radius);
}

.btn-secondary:hover {
  box-shadow: var(--card-shadow);
}

/* =========================
   HERO
   ========================= */
.hero-section {
  background: var(--hero-background);
  color: var(--hero-subtitle-color);
}

.hero-section h1,
.hero-section .hero-title {
  color: var(--hero-title-color);
}

.hero-section p,
.hero-section .hero-subtitle {
  color: var(--hero-subtitle-color);
}

/* =========================
   PRODUCT CARDS
   ========================= */
.product-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--surface-color);
}

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

.product-card .product-price {
  color: var(--primary-color);
}

/* =========================
   FOOTER
   ========================= */
.main-footer {
  background: var(--footer-background);
  color: var(--footer-text-color);
}

.main-footer h3,
.main-footer h4 {
  color: var(--secondary-color);
}

/* =========================
   MISC
   ========================= */
.cart-count {
  background: var(--secondary-color);
  border-color: var(--header-background);
  color: var(--text-color);
}

a:hover {
  color: var(--primary-color);
}

.discount-badge {
  background: var(--secondary-color);
  color: var(--text-color);
}

.search-overlay {
  background: color-mix(in srgb, var(--header-background) 96%, transparent);
}

.toast-success,
.alert-success {
  background: color-mix(in srgb, var(--success-color) 14%, var(--surface-color));
  color: var(--success-color);
  border-color: var(--success-color);
}

.order-gallery-thumb,
.admin-order-gallery-thumb {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-color) center center / cover no-repeat;
  border: 1px solid var(--border-color);
  position: relative;
}

.checkout-emphasized-row {
  color: var(--primary-color);
  font-weight: 600;
}

.checkout-discount-row {
  color: var(--success-color);
  font-weight: 600;
}
@media (max-width: 1024px) {
  .main-header .container {
    grid-template-columns: auto 1fr auto !important;
    padding: 12px 1rem !important;
  }

  .logo {
    justify-self: start;
  }

  .logo img {
    max-height: 56px !important;
    max-width: 180px;
  }

  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--background-color) !important;
  }

  .header-actions {
    gap: 0.5rem;
  }
}

@media (max-width: 1024px) {
  .main-header {
    background: color-mix(in srgb, var(--header-background) 98%, transparent) !important;
  }

  .main-header .container {
    grid-template-columns: auto 1fr auto !important;
    padding: 10px 1rem !important;
  }

  .logo {
    justify-self: start !important;
  }

  .logo img {
    max-height: 52px !important;
    max-width: 170px;
  }

  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--header-text-color) !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--header-text-color) 6%, transparent);
    border: 1px solid var(--border-color);
  }

  .header-actions {
    gap: 0.45rem;
  }
}


/* Moved from header.php inline styles */

        
        /* 1. GLASSMORPHISM UNIVERSAL (SIEMPRE CRISTALINO, NUNCA CAFÉ NI MORADO) */
        /* Al agrupar .main-header y .main-header.scrolled obligamos a que siempre sea cristal */
        .main-header, .main-header.scrolled {
            background-color: color-mix(in srgb, var(--header-background) 80%, transparent) !important; /* Cristal adaptable al tema */
            backdrop-filter: blur(28px) !important; /* Desenfoque extremo de Apple */
            -webkit-backdrop-filter: blur(28px) !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
            transition: all 0.4s ease;
        }

        /* 2. TEXTOS Y VECTORES OSCUROS SIEMPRE (Incluye Menú Hamburguesa) */
        .main-header .mobile-menu-toggle,
        .main-header .mobile-menu-toggle svg,
        .main-header .main-nav ul li a,
        .main-header .header-actions .nav-icon,
        .main-header .header-actions .nav-icon svg,
        .main-header .header-actions button,
        .main-header.scrolled .mobile-menu-toggle,
        .main-header.scrolled .mobile-menu-toggle svg,
        .main-header.scrolled .main-nav ul li a,
        .main-header.scrolled .header-actions .nav-icon,
        .main-header.scrolled .header-actions .nav-icon svg,
        .main-header.scrolled .header-actions button {
            color: var(--header-text-color) !important;
            stroke: var(--header-text-color) !important;
        }

        /* 3. SUBRAYADO CINÉTICO EN EL MENÚ */
        .main-nav ul li a {
            position: relative;
            text-decoration: none;
            padding-bottom: 6px; 
            transition: color 0.3s ease;
        }
        .main-nav ul li a::after {
            content: '';
            position: absolute;
            width: 0%;
            height: 2px;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--accent-color) !important;
            transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border-radius: 2px;
        }
        .main-nav ul li a:hover::after,
        .main-nav ul li a.active::after {
            width: 100%;
        }

        /* 4. BURBUJAS TÁCTILES EN ICONOS SUPERIORES */
        .header-actions .nav-icon {
            position: relative;
            transition: all 0.3s ease;
            border-radius: 50%;
            padding: 8px; 
            margin-right: 2px;
        }
        .header-actions .nav-icon:hover {
            background-color: rgba(0, 0, 0, 0.05); 
            transform: translateY(-2px);
        }

        /* 5. LATIDO (PULSE) CONSTANTE EN LA BOLITA DEL CARRITO */
        .cart-count {
            animation: cart-pulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        }
        @keyframes cart-pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
            50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }

        /* 6. FONDO PREMIUM PARA EL ANNOUNCEMENT BAR (Top Bar con animación) */
        .announcement-bar {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)) !important;
            background-size: 200% 200% !important;
            animation: gradient-flow 6s ease infinite;
            border-bottom: none !important;
            color: var(--button-text-color) !important;
            font-weight: 500;
            position: relative !important;
            top: auto !important;
            z-index: 2 !important;
        }
        @keyframes gradient-flow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    
            .u-text-center {
            text-align: center;
        }

        .u-mb-1 {
            margin-bottom: 1rem;
        }

        .u-mb-15 {
            margin-bottom: 1.5rem;
        }

        .u-mb-2 {
            margin-bottom: 2rem;
        }

        .u-mb-3 {
            margin-bottom: 3rem;
        }

        .u-pt-8 {
            padding-top: 8rem;
        }

        .u-pb-5 {
            padding-bottom: 5rem;
        }

        .u-fw-600 {
            font-weight: 600;
        }

        .u-fw-700 {
            font-weight: 700;
        }

        .u-text-muted {
            color: var(--text-muted);
        }

        .u-alert-success-soft {
            margin-bottom: 1.5rem;
            background: color-mix(in srgb, var(--success-color) 14%, var(--surface-color));
            color: var(--success-color);
            padding: 1rem;
            border-radius: 8px;
        }

        .u-alert-error-soft {
            margin-bottom: 1.5rem;
            background: color-mix(in srgb, var(--danger-color) 12%, var(--surface-color));
            color: var(--danger-color);
            padding: 1rem;
            border-radius: 8px;
        }

        .u-label-block {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .u-card-lite {
            background: var(--card-bg);
            border: 1px solid var(--border-light);
        }

        .u-flex-center-wrap {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .cart-img-preview--empty {
            background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
        }


/* Moved from index.php inline styles */
/* =========================================
       ESTRATEGIA PREMIUM: OUTEC ROOM DEMO INDEX
       ========================================= */
    
    /* 1. HERO SECTION PREMIUM (Insignia Flotante y Botones Elásticos) */
            .hero-badge {
                background: var(--badge-background) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
                border: 1px solid color-mix(in srgb, var(--badge-text-color) 24%, transparent) !important;
                color: var(--badge-text-color) !important;
                box-shadow: var(--shadow-sm);
                animation: floating-badge 3s ease-in-out infinite;
            }
            @keyframes floating-badge {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-6px); }
                100% { transform: translateY(0px); }
            }
            
            .hero-actions .btn {
                transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
            }
            .hero-actions .btn:hover {
                transform: translateY(-4px) scale(1.02) !important;
                box-shadow: var(--shadow-md) !important;
            }
            
            /* 2. CATEGORY SHOWCASE (Fotos 3D con bordes iPhone y Zoom lento) */
            .category-tile {
                border-radius: 24px !important;
                overflow: hidden;
                transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease !important;
                box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            }
            .category-tile-bg {
                transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
            }
            .category-tile-overlay {
                background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%) !important;
            }
            
            /* 3. TARJETAS DE PRODUCTO VIP (Trending y Top Ventas - Cero Gravedad) */
            .product-card {
                border-radius: 20px !important;
                border: 1px solid rgba(0,0,0,0.03) !important;
                background: var(--surface-color);
                transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease !important;
                overflow: hidden;
            }

            @media (hover: hover) and (pointer: fine) {
                .category-tile:hover {
                    transform: translateY(-4px) !important;
                    box-shadow: 0 14px 26px rgba(0,0,0,0.1) !important;
                }

                .category-tile:hover .category-tile-bg {
                    transform: scale(1.045) !important;
                }

                .product-card:hover {
                    transform: translateY(-5px) scale(1.01) !important;
                    box-shadow: 0 18px 32px rgba(0,0,0,0.08) !important;
                }
            }

            @media (hover: none) {
                .category-tile:hover,
                .product-card:hover {
                    transform: none !important;
                    box-shadow: inherit !important;
                }

                .category-tile:hover .category-tile-bg {
                    transform: none !important;
                }
            }
            .product-card-img {
                transition: transform 0.6s ease !important;
            }
            
            /* Botón Añadir Rápido Oculto (Aparición Fluida "Ninja") */
            .product-card .quick-add {
                opacity: 0;
                transform: translateY(15px);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
                pointer-events: none; /* Inactivo hasta que pasen el cursor */
            }

            @media (hover: hover) and (pointer: fine) {
                .product-card:hover .product-card-img {
                    transform: scale(1.03) !important;
                }

                .product-card:hover .quick-add {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translateY(-10px); /* Sube hacia el centro */
                }
            }

            @media (hover: none) {
                .product-card:hover .product-card-img {
                    transform: none !important;
                }
            }
            
            /* 4. MEDALLAS DE CONFIANZA (Iconos con Rebote y Sombra) */
            .trust-item {
                transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.65s ease, background-color 0.65s ease;
                padding: 20px !important;
                border-radius: 20px !important;
                background: var(--surface-color);
                box-shadow: 0 6px 18px rgba(0,0,0,0.03);
            }
            .trust-icon {
                display: inline-block;
                transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease !important;
                animation: trust-icon-lottie 4.8s ease-in-out infinite;
            }
            
            /* 5. BANNER PROMOCIONAL (Bordes Ultra-Suaves) */
            .promo-card {
                border-radius: 30px !important;
                overflow: hidden;
                box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
                transition: transform 0.4s ease;
            }
            .promo-card:hover {
                transform: scale(1.02);
            }
            /* Agrandamiento Vectorial de Íconos al 50% (36px) */
                .trust-icon svg {
                    width: 36px !important;
                    height: 36px !important;
                    stroke-width: 1.5px !important; /* Mantiene el trazo elegante al crecer */
                    color: var(--primary-color) !important; /* Opcional: Esto los pintará de color acento de marca. Si prefieres negro, puedes borrar esta línea */
            }

            @media (hover: hover) and (pointer: fine) {
                .trust-item:hover {
                    transform: translateY(-4px) scale(1.01) !important;
                    box-shadow: 0 16px 30px color-mix(in srgb, var(--primary-color) 8%, transparent) !important;
                    background: var(--surface-color) !important;
                }

                .trust-item:hover .trust-icon {
                    transform: translateY(-2px) scale(1.06) !important;
                    filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--primary-color) 12%, transparent));
                }
            }

            @keyframes trust-icon-lottie {
                0% { transform: translateY(0) scale(1) rotate(0deg); }
                20% { transform: translateY(-2px) scale(1.015) rotate(-1deg); }
                50% { transform: translateY(-4px) scale(1.03) rotate(1deg); }
                80% { transform: translateY(-2px) scale(1.015) rotate(-0.5deg); }
                100% { transform: translateY(0) scale(1) rotate(0deg); }
            }


/* Moved from store.php inline styles */
.store-breadcrumb {
            margin-bottom: 0.9rem;
        }

        .store-heading-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
            margin-top: 0.85rem;
        }

        .store-results-count {
            display: inline-flex;
            align-items: center;
            padding: 0.45rem 0.8rem;
            border-radius: 999px;
            background: var(--surface-warm);
            color: var(--primary-color);
            font-size: 0.88rem;
            font-weight: 700;
        }

        .store-heading-note {
            color: var(--text-muted);
            font-size: 0.92rem;
            line-height: 1.45;
        }

        .category-filter-link {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
        }

        .category-filter-name {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0;
            min-width: 0;
        }

        .category-filter-indent {
            display: inline-block;
            width: 14px;
            flex: 0 0 14px;
        }

        .category-filter-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            height: 30px;
            padding: 0 0.55rem;
            border-radius: 999px;
            background: var(--surface-warm);
            color: var(--primary-color);
            font-size: 0.8rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .filters-sidebar a.active .category-filter-count {
            background: rgba(255, 255, 255, 0.2);
            color: var(--button-text-color);
        }

        @media (max-width: 768px) {
            .store-heading-meta {
                gap: 0.55rem;
            }

            .store-results-count {
                font-size: 0.82rem;
            }

            .store-heading-note {
                font-size: 0.85rem;
            }

            .category-filter-count {
                min-width: 28px;
                height: 28px;
                font-size: 0.76rem;
            }
        }

/* ==============================================
   ADMIN: Clases compartidas (extraídas de vistas)
   ============================================== */

/* Badges de estado para pasarelas de pago y módulos admin */
.badge-active {
    background: color-mix(in srgb, var(--success-color) 14%, var(--surface-color));
    color: var(--success-color);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
}

.badge-inactive {
    background: var(--surface-elevated);
    color: var(--text-muted);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
}

/* Ícono cuadrado para pasarelas de pago */
.gateway-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--button-text-color);
    font-weight: 800;
    flex-shrink: 0;
}

/* Toggle switch reutilizable en formularios admin */
.admin-toggle-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Btn guardar de ancho completo admin (pasarelas, settings) */
.btn-save-full {
    background: var(--primary-color);
    color: var(--button-text-color);
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s;
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
}

.btn-save-full:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--primary-color) 24%, transparent);
}

/* ==============================================
   ADMIN: Premium Sidebar Redesign
   ============================================== */

/* Contenedor del sidebar: tonos cálidos y fondo limpio */
.admin-sidebar {
    background: var(--surface-elevated) !important;
    border-right: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
    box-shadow: 4px 0 24px color-mix(in srgb, var(--primary-color) 3%, transparent) !important;
}

/* Marca / Logo */
.admin-sidebar .sidebar-brand {
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent) !important;
    padding: 1.5rem !important;
}

.admin-sidebar .sidebar-site-name {
    color: var(--text-color) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Títulos de secciones */
.admin-sidebar .nav-section-label {
    color: color-mix(in srgb, var(--primary-color) 75%, var(--text-color)) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    padding-left: 1.5rem !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.5rem !important;
}

/* Enlaces principales */
.admin-sidebar .nav-link {
    color: color-mix(in srgb, var(--primary-color) 85%, var(--text-color)) !important;
    font-weight: 500 !important;
    padding: 0.8rem 1.5rem !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important; /* Borde izquierdo */
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.admin-sidebar .nav-link:hover {
    background: color-mix(in srgb, var(--primary-color) 4%, transparent) !important;
    color: var(--text-color) !important;
}

/* Estado activo: Borde izquierdo fuerte y fondo suave */
.admin-sidebar .nav-link.active {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent) !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--primary-color) !important;
    box-shadow: none !important;
}

/* Íconos Lucide */
.admin-sidebar .nav-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    color: color-mix(in srgb, var(--primary-color) 75%, var(--text-color)) !important;
    stroke-width: 1.5px !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.admin-sidebar .nav-link:hover .nav-icon {
    color: var(--primary-color) !important;
}

.admin-sidebar .nav-link.active .nav-icon {
    color: var(--primary-color) !important;
    stroke-width: 2px !important;
}

/* Submenús */
.admin-sidebar .nav-submenu {
    background: color-mix(in srgb, var(--primary-color) 1.5%, transparent) !important;
    border-left: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
    margin-left: 2rem !important;
    padding-left: 0.5rem !important;
}

.admin-sidebar .nav-sublink {
    color: var(--primary-color) !important;
    opacity: 0.8 !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 1rem !important;
    display: flex !important;
    align-items: center !important;
}

.admin-sidebar .nav-sublink:hover {
    opacity: 1 !important;
    color: var(--text-color) !important;
}

.admin-sidebar .nav-sublink.active {
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    opacity: 1 !important;
}

.admin-sidebar .nav-subicon {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    stroke-width: 1.5px !important;
    color: color-mix(in srgb, var(--primary-color) 75%, var(--text-color)) !important;
}

/* ==============================================
   OUTEC ROOM DEMO VISUAL CLOSURE PASS
   Global admin + storefront cleanup
   ============================================== */

:root {
    --demo-page-bg: var(--background-color, #f8fafc);
    --demo-admin-bg: var(--background-color, #f8fafc);
    --demo-surface: var(--surface-color, #ffffff);
    --demo-surface-soft: var(--surface-color, var(--background-color));
    --demo-line: color-mix(in srgb, var(--primary-color) 14%, transparent);
    --demo-line-strong: color-mix(in srgb, var(--primary-color) 24%, transparent);
    --demo-shadow: 0 12px 32px rgba(23, 32, 42, 0.08);
    --demo-shadow-soft: 0 8px 22px rgba(23, 32, 42, 0.06);
    --demo-radius: 8px;
    --demo-radius-sm: 6px;
    --demo-gutter: clamp(1rem, 2vw, 2rem);
    --demo-section-gap: clamp(2.25rem, 5vw, 4.5rem);
}

html {
    min-width: 320px;
    background: var(--demo-page-bg);
}

body {
    text-rendering: optimizeLegibility;
}

body:not(.admin-panel):not(.admin-login-page) {
    background: var(--demo-page-bg);
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-dark,
.btn-danger,
.btn-checkout,
.add-to-cart,
.quick-add,
.action-btn,
.status-pill,
.upload-btn,
.btn-save-full {
    min-height: 40px;
    border-radius: var(--demo-radius-sm) !important;
    font-family: inherit;
}

button:disabled,
.btn:disabled,
.btn[disabled],
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed !important;
    opacity: 0.62 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
    outline-offset: 2px;
}

.container,
.checkout-container,
.page-container,
.page-content,
.content-page,
.success-container {
    width: min(calc(100% - (var(--demo-gutter) * 2)), 1320px);
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.page-container,
.page-content,
.auth-section,
.orders-page,
.contact-page,
.product-detail-page,
.content-page {
    padding-top: clamp(2rem, 4vw, 3.75rem);
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-spacing-top {
    padding-top: 0 !important;
}

.section-header {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-header.mb-2,
.section-header.mb-3 {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.section-title,
.content-page__title,
.product-title-large,
.success-hero__title {
    color: var(--text-color);
    letter-spacing: 0 !important;
    line-height: 1.12;
    text-wrap: balance;
}

.section-subtitle,
.content-page__intro,
.success-hero__subtitle,
.text-muted {
    color: var(--primary-color) !important;
    line-height: 1.65;
}

.card,
.auth-card,
.contact-card,
.contact-form,
.cart-summary-card,
.cart-items-wrapper,
.checkout-step,
.summary-card,
.purchase-actions-card,
.success-summary-card,
.account-table-card,
.empty-state,
.order-card,
.order-downloads-card,
.detail-note-card,
.combo-component-wrapper,
.combo-component-card,
.profile-card,
.profile-section,
.form-card,
.panel-card,
.campaign-panel,
.finance-card,
.finance-kpi-card,
.migration-card,
.admin-login-card {
    border: 1px solid var(--demo-line) !important;
    border-radius: var(--demo-radius) !important;
    box-shadow: var(--demo-shadow-soft) !important;
    background: var(--demo-surface) !important;
}

.alert,
.ui-error-box,
.u-alert-success-soft,
.u-alert-error-soft,
.newsletter-inline-message {
    border-radius: var(--demo-radius-sm) !important;
    border-width: 1px !important;
    line-height: 1.5;
}

.alert-success,
.u-alert-success-soft,
.newsletter-inline-message--success {
    background: color-mix(in srgb, var(--success-color) 10%, var(--surface-color)) !important;
    border-color: color-mix(in srgb, var(--success-color) 25%, transparent) !important;
    color: var(--success-color) !important;
}

.alert-error,
.alert-danger,
.u-alert-error-soft,
.newsletter-inline-message--error,
.ui-error-box {
    background: color-mix(in srgb, var(--danger-color) 10%, var(--surface-color)) !important;
    border-color: color-mix(in srgb, var(--danger-color) 25%, transparent) !important;
    color: var(--danger-color) !important;
}

.alert-info {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--surface-color)) !important;
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
    color: var(--primary-color) !important;
}

.alert-warning {
    background: color-mix(in srgb, var(--status-warning-color) 12%, var(--surface-color)) !important;
    border-color: var(--status-warning-color) !important;
    color: var(--status-warning-color) !important;
}

.styled-form,
.sensitive-form,
.contact-form,
.profile-security-form,
.category-form {
    display: grid;
    gap: 1rem;
}

.form-group,
.field-group,
.pos-form-field,
.contact-form-group {
    min-width: 0;
}

.form-group label,
.field-group label,
.pos-form-field label,
.contact-form label,
.styled-form label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.35;
}

.form-control,
.form-select,
.styled-form input,
.styled-form select,
.styled-form textarea,
.sensitive-form input,
.sensitive-form select,
.sensitive-form textarea,
.contact-form-field,
.campaign-input,
.campaign-textarea,
.qty-input,
.admin-table input,
.admin-table select,
.admin-table textarea,
.rate-table input,
.rate-table select,
.rate-table textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface-color) !important;
    color: var(--text-color);
    min-height: 42px;
}

.styled-form textarea,
.sensitive-form textarea,
.form-control textarea,
textarea.form-control,
.campaign-textarea {
    min-height: 112px;
    resize: vertical;
}

.form-row,
.settings-grid,
.contact-grid,
.info-grid,
.pos-form-grid,
.campaign-grid,
.category-form__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    gap: 1rem !important;
    align-items: start;
}

.form-actions,
.modal-actions,
.category-modal__actions,
.pos-modal__actions,
.custom-modal-actions,
.profile-orders-actions,
.success-actions,
.cart-actions-wrapper,
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.form-actions,
.modal-actions,
.category-modal__actions,
.pos-modal__actions {
    justify-content: flex-end;
}

/* Admin shell */
body.admin-panel {
    background: var(--demo-admin-bg) !important;
    color: var(--text-color);
}

.admin-layout {
    background: var(--demo-admin-bg) !important;
    min-width: 0;
}

.admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 268px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
}

.admin-sidebar .sidebar-brand {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--surface-color) 96%, transparent);
    backdrop-filter: blur(10px);
}

.admin-sidebar .sidebar-nav ul {
    padding: 0.75rem 0 1.5rem !important;
}

.admin-sidebar .nav-link,
.admin-sidebar .nav-sublink {
    min-height: 42px;
    line-height: 1.35;
    gap: 0.25rem;
}

.admin-sidebar .nav-link span:first-child,
.admin-sidebar .nav-group-toggle span:first-child {
    min-width: 0;
}

.admin-content {
    flex: 1 1 auto;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding: clamp(1.25rem, 2vw, 2.25rem) !important;
    background: var(--demo-admin-bg) !important;
}

.content-header,
.dashboard-header {
    gap: 1rem;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--demo-line) !important;
}

.content-header h1,
.content-header h2,
.dashboard-header h2,
.admin-content h1,
.admin-content h2 {
    color: var(--text-color) !important;
    letter-spacing: 0 !important;
    line-height: 1.18;
    text-wrap: balance;
}

.admin-content .card,
.admin-content .panel-card,
.admin-content .form-card,
.admin-content .campaign-panel,
.admin-content .migration-card {
    padding: clamp(1rem, 2vw, 1.5rem) !important;
    margin-bottom: 1.25rem;
}

.stats-grid,
.dashboard-grid,
.charts-grid,
.finance-grid,
.finance-kpi-grid,
.finance-charts-grid,
.pos-search-grid {
    gap: 1rem !important;
}

.stat-card {
    border: 1px solid var(--demo-line) !important;
    border-radius: var(--demo-radius) !important;
    box-shadow: var(--demo-shadow-soft) !important;
    min-width: 0;
}

.stat-card:hover,
.card:hover,
.product-card:hover,
.promo-card:hover,
.order-card:hover {
    transform: translateY(-2px);
}

.table-container,
.campaign-table-wrap,
.pos-table-wrap,
.variants-table-wrap,
.account-table-card,
.cart-items-wrapper,
.card:has(> table),
.card:has(.admin-table),
.card:has(.rate-table),
.card:has(.items-table),
.card:has(.cart-table),
.card:has(.cart-table-styled),
.card:has(.orders-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.admin-table,
.campaign-table,
.collab-table,
.rate-table,
.items-table,
.orders-table,
.invoice-table,
.cart-table,
.cart-table-styled,
.pos-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.admin-table th,
.admin-table td,
.campaign-table th,
.campaign-table td,
.collab-table th,
.collab-table td,
.rate-table th,
.rate-table td,
.items-table th,
.items-table td,
.orders-table th,
.orders-table td,
.invoice-table th,
.invoice-table td,
.cart-table th,
.cart-table td,
.cart-table-styled th,
.cart-table-styled td,
.pos-table th,
.pos-table td {
    padding: 0.85rem 1rem !important;
    vertical-align: middle !important;
    white-space: normal;
}

.admin-table th,
.campaign-table th,
.collab-table th,
.rate-table th,
.items-table th,
.orders-table th,
.invoice-table th,
.cart-table th,
.cart-table-styled th,
.pos-table th {
    background: var(--demo-surface-soft) !important;
    color: var(--primary-color) !important;
    border-bottom: 1px solid var(--demo-line) !important;
}

.admin-table tbody tr:hover,
.campaign-table tbody tr:hover,
.collab-table tbody tr:hover,
.orders-table tbody tr:hover,
.items-table tbody tr:hover,
.cart-table-styled tbody tr:hover {
    background: var(--surface-warm) !important;
}

.admin-table form,
.campaign-table form,
.collab-table form,
.orders-table form {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.action-btn,
.admin-table form button.action-btn,
.admin-table form button {
    align-items: center !important;
    justify-content: center !important;
}

.status-badge,
.status-pill,
[class*="badge"],
.category-tag {
    border-radius: 999px !important;
    line-height: 1.2;
    white-space: nowrap;
}

.modal,
.claim-modal,
.custom-modal-overlay,
.pos-modal {
    padding: clamp(0.75rem, 2vw, 2rem) !important;
}

.modal-content,
.claim-modal-content,
.custom-modal-content,
.pos-modal__dialog,
.category-modal__content {
    width: min(100%, 980px) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow-y: auto !important;
    border-radius: var(--demo-radius) !important;
    border: 1px solid var(--demo-line) !important;
}

.modal-content.card {
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22) !important;
}

.modal-actions {
    margin-top: 1rem !important;
}

.category-modal__close,
.close,
.close-btn,
.mobile-menu-close,
.search-close {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Storefront */
.main-header .container,
.main-footer .container {
    width: min(calc(100% - (var(--demo-gutter) * 2)), 1320px);
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.product-grid,
.category-grid,
.trust-grid {
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.product-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.grid-4-col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.product-card,
.promo-card,
.category-tile,
.trust-item {
    min-width: 0;
    border-radius: var(--demo-radius) !important;
    border: 1px solid var(--demo-line) !important;
    overflow: hidden;
}

.product-card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.product-card .product-link {
    display: block;
}

.product-image,
.product-detail-hero-img,
.product-detail-image,
.cart-img-preview,
.cart-combo-gallery-thumb,
.order-item-media,
.thumb-item {
    background-color: var(--surface-warm) !important;
}

.product-image {
    aspect-ratio: 1 / 1;
    height: auto !important;
    overflow: hidden;
}

.product-card-img,
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem !important;
}

.product-title,
.product-title a,
.cart-product-name,
.order-item-title {
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.product-info .add-to-cart,
.product-card .quick-add,
.product-info .btn {
    margin-top: auto;
    width: 100%;
}

.store-layout {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) !important;
    gap: clamp(1.25rem, 3vw, 2.5rem) !important;
}

.filters-sidebar {
    border-radius: var(--demo-radius) !important;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
}

.product-detail-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
}

.product-gallery,
.product-detail-info,
.product-info-side,
.combo-component-wrapper {
    min-width: 0;
}

.product-detail-hero-img {
    aspect-ratio: 1 / 1;
    width: 100%;
}

.purchase-actions-card {
    padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.cart-layout-container,
.checkout-grid,
.order-content,
.profile-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(1.25rem, 3vw, 2rem) !important;
    align-items: start;
}

.cart-summary-card,
.checkout-summary,
.profile-sidebar {
    position: sticky;
    top: calc(var(--main-header-height, 72px) + 1rem);
}

.checkout-progress {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}

.progress-step {
    min-width: 96px;
}

.cart-product-cell,
.order-item-product,
.cart-item,
.bank-account-card,
.order-download-block {
    min-width: 0;
}

.cart-combo-gallery-preview {
    flex-shrink: 0;
}

.auth-container,
.auth-card {
    width: min(100%, 680px);
    margin-left: auto;
    margin-right: auto;
}

.auth-card.wide {
    width: min(100%, 860px);
}

.content-page {
    max-width: 920px;
}

.content-page__section {
    border-radius: var(--demo-radius) !important;
}

.main-footer {
    margin-top: var(--demo-section-gap);
}

.footer-grid,
.main-footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr) minmax(260px, 1fr) !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
    align-items: start;
}

.newsletter-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

.newsletter-form input[type="email"] {
    min-width: 0;
}

.whatsapp-greeting {
    max-width: min(280px, calc(100vw - 110px));
}

@media (min-width: 1440px) {
    .admin-content {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }

    .product-grid,
    .grid-4-col {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }
}

@media (max-width: 1280px) {
    .admin-sidebar {
        width: 248px !important;
    }

    .admin-sidebar .nav-link {
        padding-left: 1.15rem !important;
        padding-right: 1rem !important;
    }

    .cart-layout-container,
    .checkout-grid,
    .order-content,
    .profile-layout {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    }
}

@media (max-width: 1024px) {
    .admin-sidebar {
        width: 232px !important;
    }

    .admin-content {
        padding: 1.25rem !important;
    }

    .content-header,
    .dashboard-header {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .store-layout,
    .product-detail-grid,
    .cart-layout-container,
    .checkout-grid,
    .order-content,
    .profile-layout,
    .contact-grid {
        grid-template-columns: 1fr !important;
    }

    .cart-summary-card,
    .checkout-summary,
    .profile-sidebar,
    .filters-sidebar {
        position: static;
        max-height: none;
    }

    .main-header .container {
        width: min(calc(100% - 2rem), 1320px);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 768px) {
    :root {
        --demo-gutter: 1rem;
    }

    .container,
    .checkout-container,
    .page-container,
    .page-content,
    .content-page,
    .success-container {
        width: calc(100% - 2rem);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .admin-layout {
        display: block !important;
    }

    .admin-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--demo-line) !important;
    }

    .admin-sidebar .sidebar-brand {
        position: static;
        padding: 1rem !important;
    }

    .admin-sidebar .sidebar-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .admin-sidebar .sidebar-nav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.35rem;
        padding: 0.5rem 1rem 1rem !important;
    }

    .admin-sidebar .sidebar-nav li {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    .admin-sidebar .nav-section-label {
        display: none !important;
    }

    .admin-sidebar .nav-link,
    .admin-sidebar .nav-sublink {
        border: 1px solid var(--demo-line) !important;
        border-radius: 999px !important;
        padding: 0.65rem 0.9rem !important;
        background: var(--surface-color) !important;
        white-space: nowrap;
    }

    .admin-sidebar .nav-submenu {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .admin-sidebar .nav-arrow {
        display: none;
    }

    .admin-content {
        padding: 1rem !important;
    }

    .admin-content .card,
    .admin-content .panel-card,
    .admin-content .form-card,
    .admin-content .campaign-panel,
    .admin-content .migration-card,
    .auth-card,
    .contact-card,
    .contact-form,
    .checkout-step,
    .summary-card,
    .purchase-actions-card,
    .success-summary-card,
    .profile-card,
    .profile-section {
        padding: 1rem !important;
    }

    .content-header .btn,
    .content-header button,
    .form-actions .btn,
    .modal-actions .btn,
    .success-actions .btn,
    .cart-actions-wrapper .btn {
        width: 100%;
    }

    .admin-table,
    .campaign-table,
    .collab-table,
    .rate-table,
    .items-table,
    .orders-table,
    .invoice-table,
    .cart-table,
    .cart-table-styled,
    .pos-table {
        min-width: 640px;
    }

    .modal-content,
    .claim-modal-content,
    .custom-modal-content,
    .pos-modal__dialog,
    .category-modal__content {
        margin: 0 auto !important;
        padding: 1rem !important;
        max-height: calc(100dvh - 1rem) !important;
    }

    .modal-actions {
        position: static !important;
        margin: 1rem 0 0 !important;
        padding: 1rem 0 0 !important;
        border-top: 1px solid var(--demo-line);
    }

    .product-grid,
    .grid-4-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .footer-grid,
    .main-footer .footer-grid,
    .newsletter-form {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }

    .main-footer .container.footer-bottom {
        display: grid;
        gap: 0.75rem;
        text-align: left;
    }

    .whatsapp-greeting {
        display: none;
    }
}

@media (max-width: 430px) {
    .product-grid,
    .grid-4-col,
    .category-grid {
        grid-template-columns: 1fr !important;
    }

    .main-header .container {
        width: calc(100% - 1.5rem);
        gap: 0.5rem;
    }

    .logo img,
    .site-logo-image {
        max-width: 150px !important;
        max-height: 64px !important;
    }

    .header-actions {
        gap: 0.2rem !important;
    }

    .nav-icon {
        width: 38px;
        height: 38px;
    }

    .checkout-progress {
        justify-content: flex-start;
    }

    .admin-table,
    .campaign-table,
    .collab-table,
    .rate-table,
    .items-table,
    .orders-table,
    .invoice-table,
    .cart-table,
    .cart-table-styled,
    .pos-table {
        min-width: 580px;
    }

    .cart-product-cell,
    .order-item-product {
        align-items: flex-start;
    }

    .custom-modal-actions,
    .modal-actions,
    .success-actions,
    .cart-actions-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 375px) {
    .admin-content,
    .admin-content .card,
    .auth-card,
    .contact-form,
    .checkout-step,
    .summary-card {
        padding: 0.85rem !important;
    }

    .section-title,
    .content-page__title,
    .product-title-large {
        font-size: clamp(1.55rem, 8vw, 2rem) !important;
    }

    .btn-large,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-outline-dark {
        width: 100%;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .admin-sidebar {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
    }

    .modal-content,
    .claim-modal-content,
    .custom-modal-content,
    .pos-modal__dialog {
        max-height: calc(100dvh - 1rem) !important;
    }

    .hero-section {
        min-height: auto !important;
        padding: 3rem 0 !important;
    }
}

/* ==============================================
   AGENT.MD CLOSURE PASS 2
   Home cards + mobile front/admin pattern closure
   ============================================== */

.best-sellers-section,
.featured-products,
.promo-banner,
.trust-section,
.mixed-commerce-section {
    margin-top: var(--demo-section-gap) !important;
    margin-bottom: var(--demo-section-gap) !important;
}

.best-sellers-section {
    overflow: hidden;
}

.product-carousel-wrapper {
    padding: 0 clamp(0.5rem, 2vw, 1.5rem) !important;
    max-width: 100%;
}

.product-carousel {
    align-items: stretch;
    gap: clamp(1rem, 2vw, 1.35rem) !important;
    padding: 0.25rem 0.25rem 1.5rem !important;
}

.carousel-item {
    width: clamp(220px, 22vw, 280px) !important;
    max-width: 280px;
    display: flex;
}

.carousel-item .product-card {
    width: 100%;
}

.product-card {
    contain: layout paint;
    isolation: isolate;
}

.product-card .product-link {
    flex: 0 0 auto;
}

.product-card .product-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 300px;
    transform: none !important;
}

.product-card:hover .product-image {
    transform: none !important;
}

.product-card-img,
.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-position: center;
}

.product-card-placeholder {
    min-height: 100%;
}

.product-info {
    min-height: 178px;
}

.product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.7em;
    overflow: hidden;
}

.product-price {
    margin: 0 !important;
}

.product-tax-note {
    display: inline-flex;
    width: fit-content;
    margin: 0;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-warning-color) 12%, var(--surface-color));
    color: var(--status-warning-color);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.product-card--combo {
    border: 2px solid color-mix(in srgb, var(--primary-color) 42%, transparent) !important;
}

.discount-badge--combo {
    background: var(--secondary-color) !important;
    color: var(--button-text-color) !important;
}

.mixed-commerce-section .section-header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.catalog-link-wrapper,
.catalog-link-wrapper--split,
.promo-actions,
.hero-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem !important;
    margin-top: clamp(1.25rem, 3vw, 2rem) !important;
}

.catalog-link-wrapper .btn,
.promo-actions .btn,
.hero-actions .btn {
    margin-left: 0 !important;
}

.category-grid {
    align-items: stretch;
}

.category-tile,
.trust-item {
    height: auto;
    min-height: 210px;
}

.trust-grid {
    align-items: stretch;
}

.trust-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.promo-card {
    min-height: 0 !important;
}

.promo-image {
    min-height: clamp(240px, 32vw, 420px);
}

.promo-content {
    min-width: 0;
    padding: clamp(1.25rem, 4vw, 3rem) !important;
}

.radio-grid,
.info-grid,
.checkout-steps,
.checkout-summary,
.summary-card,
.coupon-section,
.bank-account-card,
.payment-details,
.pos-page,
.pos-stack,
.pos-card,
.pos-summary-card,
.settings-grid,
.form-section,
.finance-grid,
.finance-kpi-grid,
.finance-charts-grid,
.campaign-form-layout,
.campaign-grid {
    min-width: 0;
}

.radio-card-content {
    gap: 0.85rem;
    min-width: 0;
}

.radio-text,
.radio-desc,
.radio-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.radio-price {
    flex-shrink: 0;
}

.checkout-step[style],
.summary-card[style],
.card[style],
.panel-card[style],
.pos-card[style] {
    border-radius: var(--demo-radius) !important;
}

.pos-page {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.pos-card,
.pos-summary-card {
    border-radius: var(--demo-radius) !important;
    border: 1px solid var(--demo-line) !important;
    box-shadow: var(--demo-shadow-soft) !important;
}

.pos-inline-actions {
    gap: 0.75rem !important;
}

.pos-inline-actions input {
    min-width: min(100%, 220px) !important;
}

.pos-summary-card {
    top: 1rem !important;
}

.pos-table-wrap {
    max-width: 100%;
}

.settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.form-section {
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--demo-line);
    border-radius: var(--demo-radius);
    background: var(--card-bg);
}

.form-section + .form-section {
    margin-top: 1rem;
}

.admin-content input[type="checkbox"],
.admin-content input[type="radio"],
.styled-form input[type="checkbox"],
.styled-form input[type="radio"],
.sensitive-form input[type="checkbox"],
.sensitive-form input[type="radio"] {
    width: auto !important;
    min-height: auto !important;
}

.admin-content [style*="display:flex"],
.admin-content [style*="display: flex"] {
    min-width: 0;
}

.admin-content [style*="grid-template-columns"],
.admin-content .combo-component-row {
    min-width: 0;
}

.combo-component-row {
    grid-template-columns: minmax(220px, 1fr) minmax(88px, 120px) minmax(150px, 190px) 44px !important;
}

.admin-content textarea,
.admin-content input,
.admin-content select {
    min-width: 0;
}

@media (min-width: 1281px) {
    .product-grid.grid-4-col,
    .mixed-commerce-section .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .store-layout .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1280px) {
    .product-card .product-image {
        max-height: 280px;
    }

    .pos-page {
        grid-template-columns: 1fr !important;
    }

    .pos-summary-card {
        position: static !important;
    }
}

@media (max-width: 1024px) {
    .category-grid,
    .product-grid,
    .product-grid.grid-4-col {
        display: grid !important;
        flex-direction: initial !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        padding: 0 !important;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .product-grid,
    .product-grid.grid-4-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .category-grid .category-tile,
    .product-grid .product-card {
        flex: initial !important;
        max-width: none !important;
        scroll-snap-align: none !important;
    }

    .product-carousel {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important;
        padding-bottom: 1rem !important;
    }

    .carousel-item {
        width: clamp(220px, 42vw, 260px) !important;
        flex: 0 0 auto !important;
        scroll-snap-align: start !important;
    }

    .promo-card {
        grid-template-columns: 1fr !important;
    }

    .promo-image {
        min-height: 280px;
    }

    .combo-component-row {
        grid-template-columns: minmax(0, 1fr) minmax(88px, 110px) !important;
    }
}

@media (max-width: 768px) {
    .best-sellers-section,
    .featured-products,
    .promo-banner,
    .trust-section,
    .mixed-commerce-section {
        margin-top: 2.25rem !important;
        margin-bottom: 2.25rem !important;
    }

    .section-header {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }

    .product-grid,
    .product-grid.grid-4-col,
    .category-grid,
    .trust-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .product-card {
        max-width: 100%;
    }

    .product-card .product-image {
        aspect-ratio: 4 / 3 !important;
        max-height: none;
    }

    .product-info {
        min-height: auto;
        padding: 0.95rem !important;
    }

    .product-title {
        min-height: auto;
    }

    .carousel-item {
        width: min(78vw, 270px) !important;
    }

    .carousel-item .product-card .product-image {
        aspect-ratio: 1 / 1 !important;
    }

    .catalog-link-wrapper,
    .catalog-link-wrapper--split,
    .promo-actions,
    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-link-wrapper .btn,
    .promo-actions .btn,
    .hero-actions .btn {
        width: 100%;
    }

    .radio-card-content {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1rem !important;
    }

    .radio-icon {
        flex: 0 0 42px;
        height: 42px;
        width: 42px;
        margin-right: 0 !important;
    }

    .radio-price {
        margin-left: 0;
    }

    .checkout-header {
        text-align: left !important;
    }

    .step-header {
        align-items: flex-start;
    }

    .summary-header,
    .total-row,
    .pos-summary-stat,
    .pos-summary-total {
        gap: 0.75rem;
    }

    .pos-card,
    .pos-summary-card {
        padding: 1rem !important;
    }

    .pos-search-grid,
    .pos-form-grid,
    .campaign-grid,
    .settings-grid {
        grid-template-columns: 1fr !important;
    }

    .pos-inline-actions,
    .pos-modal__actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .pos-inline-actions input,
    .pos-inline-actions button,
    .pos-modal__actions .btn {
        width: 100% !important;
    }

    .combo-component-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0.75rem;
        border: 1px solid var(--demo-line);
        border-radius: var(--demo-radius-sm);
        background: var(--surface-warm);
    }

    .combo-component-row > * {
        width: 100% !important;
    }

    .admin-content .sticky,
    .admin-content [style*="position: sticky"] {
        position: static !important;
    }
}

@media (max-width: 430px) {
    .product-card .product-image {
        aspect-ratio: 1 / 1 !important;
    }

    .category-tile {
        min-height: 180px;
    }

    .promo-image {
        min-height: 220px;
    }

    .product-carousel-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .carousel-item {
        width: min(84vw, 260px) !important;
    }

    .admin-table,
    .campaign-table,
    .collab-table,
    .rate-table,
    .items-table,
    .orders-table,
    .invoice-table,
    .cart-table,
    .cart-table-styled,
    .pos-table {
        min-width: 520px !important;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .product-grid,
    .category-grid,
    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .product-card .product-image {
        aspect-ratio: 4 / 3 !important;
    }

    .admin-sidebar .sidebar-nav ul {
        padding-bottom: 0.5rem !important;
    }
}

/* ==============================================
   ADMIN MOBILE HARD CLOSURE
   CMS, shipping, promotions, payments, Google tools
   ============================================== */

body.admin-layout {
    background: var(--demo-admin-bg) !important;
    color: var(--text-color);
}

body.admin-layout > .admin-sidebar,
body.admin-layout > .admin-content {
    min-width: 0;
}

.admin-content > header[style],
.admin-content .content-header[style] {
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
}

.admin-content > header[style] > div,
.admin-content section.card > div[style*="display:flex"],
.admin-content section.card > div[style*="display: flex"],
.admin-content .card > div[style*="display:flex"],
.admin-content .card > div[style*="display: flex"] {
    min-width: 0;
}

.admin-content > header[style] h1,
.admin-content > header[style] h2,
.admin-content .content-header h1,
.admin-content .content-header h2 {
    overflow-wrap: anywhere;
}

.admin-content form[style*="minmax(450px"],
.admin-content div[style*="minmax(450px"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: clamp(1rem, 3vw, 1.5rem) !important;
}

.file-input-wrapper {
    min-width: 0;
}

.file-input-wrapper .form-control,
.file-input-wrapper input[type="file"],
.file-input-wrapper input[type="text"],
.file-input-wrapper input[type="url"] {
    min-width: 0;
}

.color-picker-wrapper {
    min-width: 0;
    flex-wrap: wrap;
}

.color-picker-wrapper input[type="color"] {
    flex: 0 0 50px;
}

.preview-box {
    max-width: 100%;
}

.settings-card,
.promo-grid,
.promo-grid > *,
.panel-card,
.rate-table,
.rate-table tbody,
.rate-table tr,
.rate-table td,
.rate-table th {
    min-width: 0;
}

.settings-card {
    overflow: hidden;
}

.promo-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr) !important;
}

.promo-grid .panel-card {
    align-self: start;
}

.promo-grid .table-container {
    max-width: 100%;
    overflow-x: auto !important;
}

.promo-grid .admin-table {
    min-width: 760px;
}

.badge,
code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.gateway-icon,
.icon-box {
    flex: 0 0 auto;
}

.toggle-switch,
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    line-height: 1.45;
}

.toggle-switch input,
.checkbox-wrapper input {
    flex: 0 0 auto;
}

@media (max-width: 1024px) {
    body.admin-layout,
    .admin-layout {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
    }

    body.admin-layout > .admin-sidebar,
    .admin-layout > .admin-sidebar,
    .admin-sidebar {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--demo-line) !important;
        box-shadow: none !important;
    }

    .admin-sidebar .sidebar-brand {
        position: relative !important;
        top: auto !important;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 0;
        padding: 1rem !important;
    }

    .admin-sidebar .sidebar-site-name {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .admin-sidebar .sidebar-nav {
        width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 1rem 1rem !important;
        scrollbar-width: none;
    }

    .admin-sidebar .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .admin-sidebar .sidebar-nav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.65rem !important;
        width: max-content !important;
        min-width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    .admin-sidebar .sidebar-nav li {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .admin-sidebar .nav-section-label {
        display: none !important;
    }

    .admin-sidebar .nav-link,
    .admin-sidebar .nav-sublink {
        display: inline-flex !important;
        width: auto !important;
        min-width: max-content !important;
        min-height: 44px !important;
        padding: 0.7rem 1rem !important;
        border: 1px solid var(--demo-line) !important;
        border-radius: 999px !important;
        background: var(--surface-color) !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    .admin-sidebar .nav-link.active,
    .admin-sidebar .nav-sublink.active {
        border-color: color-mix(in srgb, var(--primary-color) 34%, transparent) !important;
        background: var(--surface-warm) !important;
    }

    .admin-sidebar .nav-submenu {
        display: none !important;
    }

    .admin-sidebar .nav-submenu.open {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.65rem !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .admin-sidebar .nav-arrow {
        display: none !important;
    }

    body.admin-layout > .admin-content,
    .admin-layout > .admin-content,
    .admin-content {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: clamp(1rem, 3vw, 1.5rem) !important;
        overflow-x: hidden !important;
    }

    .admin-content > header[style] > div,
    .content-header,
    .content-header[style] {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
    }

    .content-header .btn,
    .content-header a.btn,
    .admin-content > header .btn {
        width: auto !important;
        max-width: 100%;
    }

    .admin-content > header[style] h1,
    .admin-content > header[style] h2,
    .content-header h1,
    .content-header h2 {
        font-size: clamp(1.45rem, 5vw, 2rem) !important;
        line-height: 1.15 !important;
    }

    .form-section,
    .settings-card,
    .panel-card,
    .card {
        max-width: 100%;
    }

    .file-input-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
        align-items: stretch !important;
    }

    .file-input-wrapper span {
        display: block;
    }

    .form-row,
    .settings-grid,
    .promo-grid,
    .admin-content form[style*="minmax(450px"],
    .admin-content div[style*="minmax(450px"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .full-width {
        grid-column: auto !important;
    }

    .promo-grid .panel-card[style*="sticky"],
    .admin-content [style*="position: sticky"] {
        position: static !important;
        top: auto !important;
    }

    .promo-grid .admin-table {
        min-width: 0 !important;
    }

    .promo-grid .admin-table,
    .promo-grid .admin-table thead,
    .promo-grid .admin-table tbody,
    .promo-grid .admin-table tr,
    .promo-grid .admin-table th,
    .promo-grid .admin-table td {
        display: block !important;
        width: 100% !important;
    }

    .promo-grid .admin-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    .promo-grid .admin-table tbody {
        display: grid !important;
        gap: 0.85rem !important;
    }

    .promo-grid .admin-table tr {
        padding: 0.85rem !important;
        border: 1px solid var(--demo-line) !important;
        border-radius: var(--demo-radius) !important;
        background: var(--surface-color) !important;
    }

    .promo-grid .admin-table td {
        display: flex !important;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.65rem 0 !important;
        border-bottom: 1px solid var(--demo-line) !important;
        text-align: right !important;
    }

    .promo-grid .admin-table td:last-child {
        border-bottom: 0 !important;
    }

    .promo-grid .admin-table td::before {
        content: "";
        color: var(--primary-color);
        font-weight: 800;
        text-align: left;
    }

    .promo-grid .admin-table td:nth-child(1)::before { content: "Nombre"; }
    .promo-grid .admin-table td:nth-child(2)::before { content: "Tipo"; }
    .promo-grid .admin-table td:nth-child(3)::before { content: "Valor"; }
    .promo-grid .admin-table td:nth-child(4)::before { content: "Cupón"; }
    .promo-grid .admin-table td:nth-child(5)::before { content: "Aplica a"; }
    .promo-grid .admin-table td:nth-child(6)::before { content: "Estado"; }
    .promo-grid .admin-table td:nth-child(7)::before { content: "Acciones"; }

    .promo-grid .admin-table td[colspan] {
        display: block !important;
        text-align: center !important;
    }

    .promo-grid .admin-table td[colspan]::before {
        content: none !important;
    }

    .rate-table {
        min-width: 0 !important;
    }

    .rate-table,
    .rate-table thead,
    .rate-table tbody,
    .rate-table tr,
    .rate-table th,
    .rate-table td {
        display: block !important;
        width: 100% !important;
    }

    .rate-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    .rate-table tbody {
        display: grid !important;
        gap: 0.85rem !important;
    }

    .rate-table tr {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
        padding: 0.85rem !important;
        border: 1px solid var(--demo-line) !important;
        border-radius: var(--demo-radius) !important;
        background: var(--surface-color) !important;
    }

    .rate-table td {
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    .rate-table td::before {
        display: block;
        margin-bottom: 0.35rem;
        color: var(--primary-color);
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .rate-table td:nth-child(1)::before { content: "Activo"; }
    .rate-table td:nth-child(2)::before { content: "Zona"; }
    .rate-table td:nth-child(3)::before { content: "Tarifa"; }

    .rate-table input[type="text"],
    .rate-table input[type="number"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    section.card > div[style*="display:flex"],
    section.card > div[style*="display: flex"],
    .card > div[style*="display:flex"],
    .card > div[style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    .gateway-icon + h2,
    .icon-box + h2 {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    .admin-content {
        padding: 0.85rem !important;
    }

    .form-section,
    .settings-card,
    .panel-card,
    .admin-content .card {
        padding: 1rem !important;
        border-radius: var(--demo-radius) !important;
    }

    .admin-sidebar .sidebar-brand {
        padding: 0.85rem !important;
    }

    .admin-sidebar .sidebar-nav {
        padding: 0 0.85rem 0.85rem !important;
    }

    .admin-sidebar .nav-link,
    .admin-sidebar .nav-sublink {
        min-height: 40px !important;
        padding: 0.6rem 0.85rem !important;
        font-size: 0.9rem !important;
    }

    .content-header .btn,
    .content-header a.btn,
    .admin-content > header .btn,
    .form-actions .btn,
    .btn-save,
    .btn-save-full {
        width: 100% !important;
    }

    .admin-content > header[style] > div:first-child {
        flex-wrap: nowrap !important;
    }

    .admin-content > header[style] > div:first-child > div {
        flex: 0 0 auto;
    }

    .admin-content .alert {
        padding: 0.85rem !important;
    }
}


/* Generated reusable classes from migrated inline styles */
.u-style-008a31c6f7 { margin-bottom: 2rem; }
.u-style-012c92876c { background:var(--muted-text-color); color:var(--surface-color); }
.u-style-013ae0c555 { text-align: right; font-weight: 700; color: var(--primary-color); }
.u-style-03e10375fb { padding: 0.8rem; border: 1px solid var(--border-color); border-radius: 0.5rem; width: 100%; }
.u-style-0522ff3e97 { display: flex; gap: 0.5rem; }
.u-style-05303edc71 { flex: 1; padding: 2rem; background: var(--surface-color); }
.u-style-05c1850848 { display:flex; gap:0.5rem; flex-wrap:wrap; margin:0 0 1rem; }
.u-style-064716eb27 { background:color-mix(in srgb, var(--status-warning-color) 15%, transparent); color:var(--status-warning-color); padding:1rem; border-radius:10px; margin-bottom:1.5rem; }
.u-style-0745c7432f { background:none; border:none; cursor:pointer; padding:0; }
.u-style-0749538da4 { display: block; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--muted-text-color); }
.u-style-07bbf13a37 { font-size:0.75rem; }
.u-style-09626c537a { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 2.5rem; }
.u-style-0973d7afda { color: var(--text-color); font-weight: 700; margin-bottom: 0.5rem; }
.u-style-09c3df1d38 { width: 100%; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.u-style-0a8ca1da2b { width: auto; }
.u-style-0ae3130626 { color: var(--primary-color); margin-bottom: 0.25rem; }
.u-style-0cd28ce9ba { display:inline; }
.u-style-0cf8f93b0e { margin-top:1rem; }
.u-style-0d210dfad3 { display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.u-style-0dc8cc6234 { margin-top: 0.5rem; }
.u-style-0ecea92fee { color: var(--danger-color); font-size: 1.5rem; }
.u-style-0f8a5a04ec { color: var(--muted-text-color); font-size: 0.9rem; }
.u-style-0f94fbfe30 { font-size: 2rem; font-weight: 800; color: var(--text-color); letter-spacing: -0.02em; }
.u-style-1047319d2d { font-weight: 800; color: var(--primary-color); }
.u-style-1151799950 { width: 50%; }
.u-style-12191f78d4 { width: 50px; height: 50px; background: color-mix(in srgb, var(--danger-color) 15%, transparent); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.u-style-1301ea59f6 { display:flex; gap:0.75rem; }
.u-style-13cbe03b9a { text-align: right; }
.u-style-14a1a2decd { background:color-mix(in srgb, var(--primary-color) 10%, var(--surface-color)); color:var(--primary-color); width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.u-style-15d1a49c60 { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--background-color); }
.u-style-15d9f296bb { display:none; margin-top:0.75rem; }
.u-style-16582aa41e { text-decoration:none; color: var(--primary-color); margin-right: 1rem; }
.u-style-16884469a8 { margin-bottom:1rem; }
.u-style-1b2887d3a5 { color:var(--status-warning-color); font-size:0.95rem; line-height:1.6; margin:0; }
.u-style-1ba55eb348 { background: color-mix(in srgb, var(--success-color) 14%, var(--surface-color)); color: var(--success-color); padding: 1rem; border-radius: 8px; margin-bottom: 2rem; }
.u-style-1ba580b2aa { color: red; font-weight: bold; }
.u-style-1ba88744e9 { color: green; font-weight: bold; }
.u-style-1bac9ad4ee { color: var(--success-color); }
.u-style-1cb0d21aad { border:1px dashed var(--border-color); border-radius:8px; padding:0.75rem; text-align:center; background:var(--surface-color); cursor:pointer; margin-bottom:0.75rem; }
.u-style-1da9facb4d { margin:0; }
.u-style-1dfbba896f { display:flex; align-items:center; gap:0.5rem; }
.u-style-1f1aaad3b1 { background:var(--background-color); color:var(--muted-text-color); text-decoration:none; }
.u-style-1f1f25886c { background: var(--surface-color); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); overflow: hidden; }
.u-style-1f9fc2f6f0 { margin:0 0 1rem; }
.u-style-2166d83ab3 { width: 100%; padding: 0.8rem; background: var(--primary-color); color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
.u-style-21882d75b9 { font-weight: 500; color: var(--muted-text-color); }
.u-style-21d91b7027 { display:block; }
.u-style-224669f855 { display:inline-block; margin-top: 8px; }
.u-style-22503da6cd { display: none; margin-top: 1.5rem; background: color-mix(in srgb, var(--primary-color) 10%, transparent); padding: 1rem; border-radius: 12px; color: var(--primary-color); }
.u-style-2257a2f1ff { color: var(--danger-color); margin-top: 0; }
.u-style-229b4e719d { display:flex; gap:1rem; align-items:flex-start; }
.u-style-22c7d8fb06 { margin-top: 1rem; font-size: 0.9rem; text-transform: uppercase; color: var(--muted-text-color); }
.u-style-23669e9ffb { background: var(--text-color); }
.u-style-2419c72203 { background: var(--background-color); }
.u-style-2491c12e55 { background-color: color-mix(in srgb, var(--danger-color) 15%, transparent); color: var(--danger-color); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; }
.u-style-260d028a51 { padding: 0.5rem 1rem; font-size: 0.85rem; }
.u-style-26bc4dcfbe { font-size: 0.85rem; color: var(--muted-text-color); }
.u-style-2791dfce81 { color: var(--primary-color); text-decoration: none; }
.u-style-294cb0661f { background:color-mix(in srgb, var(--danger-color) 15%, transparent); color:var(--danger-color); padding:1rem; border-radius:10px; margin-bottom:1.5rem; }
.u-style-2a01802927 { margin-top:1.5rem; }
.u-style-2bef71d7ac { border: 2px dashed var(--border-color); border-radius: 8px; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--surface-color); margin-bottom: 1.5rem; }
.u-style-2c8110d4ee { max-width: 400px; }
.u-style-2d98adf5c6 { margin-bottom: 10px; }
.u-style-2f8e8ab1f2 { width:auto; }
.u-style-31cb943445 { font-size:0.85rem; color:var(--muted-text-color); }
.u-style-31f575bea2 { margin-right: 10px; }
.u-style-3340ffc55d { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.u-style-342d988c44 { margin-top: 0.75rem; }
.u-style-3580d6a1c0 { font-size: 2.5rem; font-weight: 800; color: var(--text-color); margin-bottom: 2rem; }
.u-style-36ca0aff10 { margin-top: 8px; }
.u-style-36e04ca95b { width:56px; height:56px; border-radius:12px; background:var(--surface-color); flex-shrink:0; border:1px solid var(--border-color); }
.u-style-37de2c4270 { border: 2px solid var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, var(--surface-color)); }
.u-style-38d3523fec { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.u-style-390784aa44 { margin: 0.5rem 0 1rem; }
.u-style-39456bb3b1 { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.u-style-397e17da87 { color: var(--primary-color); font-weight: 600; }
.u-style-39d1db54c5 { font-size: 0.9rem; margin-bottom: 0; }
.u-style-3b225f0ccf { flex: 0 0 200px; }
.u-style-41c62f5dba { display:grid; grid-template-columns:repeat(auto-fit, minmax(450px, 1fr)); gap:2.5rem; }
.u-style-42d4450c02 { overflow-x: auto; }
.u-style-42f2e89fde { padding:1rem; border-radius:10px; background:color-mix(in srgb, var(--primary-color) 10%, transparent); color:var(--primary-color); margin-bottom:1.5rem; }
.u-style-434fc32ec2 { display: inline; }
.u-style-43d37d3d25 { color:var(--muted-text-color); }
.u-style-44c26a8e8e { display:inline-block; }
.u-style-454aad9f91 { display:flex; gap:0.45rem; flex-wrap:wrap; min-width:74px; max-width:96px; }
.u-style-487b2c5804 { display: flex; gap: 0.5rem; align-items: center; }
.u-style-48c563003c { min-height: 50px; }
.u-style-4a165c88be { color: var(--muted-text-color); }
.u-style-4b87b94124 { width: 48px; height: 48px; background: var(--surface-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--muted-text-color); font-weight: 600; }
.u-style-4dd1881797 { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
.u-style-50666a574d { position: relative; }
.u-style-54ed7309ed { display:grid; gap:1.5rem; }
.u-style-567a219dde { margin-bottom: 2rem; border-left: 4px solid var(--danger-color); background: color-mix(in srgb, var(--danger-color) 12%, var(--surface-color)); color: var(--danger-color); padding: 1rem; border-radius: 8px; }
.u-style-5770c35325 { border-top: 1px solid var(--border-light); margin-top: 1.5rem; padding-top: 1.5rem; }
.u-style-5bc91d0035 { background:var(--danger-color); color:var(--button-text-color); }
.u-style-5c05f4afaf { font-weight: 600; }
.u-style-5c10eac00f { text-align: center; color: var(--muted-text-color); font-size: 0.85rem; margin-top: 1rem; }
.u-style-5cd0c54ec9 { color:var(--primary-color); font-size:0.95rem; line-height:1.6; margin:0; }
.u-style-5f56bf1d30 { color: var(--success-color); margin-top: 0.5rem; margin-bottom: 0; }
.u-style-5f7449414c { display:flex; align-items:center; gap:0.5rem; font-size:0.9rem; }
.u-style-6163e4a95d { display:inline-flex; }
.u-style-63724cfaa9 { background:color-mix(in srgb, var(--primary-color) 10%, transparent); color:var(--primary-color); padding:1rem; border-radius:10px; margin-bottom:1.5rem; }
.u-style-641a86b0e6 { display:inline-flex; margin-top:0.35rem; color:var(--status-warning-color); background:color-mix(in srgb, var(--status-warning-color) 15%, transparent); padding:2px 6px; border-radius:999px; }
.u-style-648149cea2 { margin-bottom: 0; }
.u-style-652b22a8bb { font-weight: 700; color: var(--success-color); }
.u-style-669f440a33 { background-color: var(--secondary-color); }
.u-style-69810cfb5c { width: auto; padding: 2px 5px; font-size: 0.8rem; }
.u-style-699f89da79 { padding: 1rem; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 0.5rem; }
.u-style-69b5020841 { background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-hover); padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; }
.u-style-69d66e5b2e { width: 100%; }
.u-style-6b68ac9f88 { margin-right: 0.5rem; }
.u-style-6d304fc40f { color: var(--danger-color); margin-bottom: 1.5rem; }
.u-style-6e58ee35af { margin-top:2rem; }
.u-style-6f65ab3bec { background: var(--surface-color); padding: 1.5rem; }
.u-style-702f95801e { color: var(--text-color); font-weight: 800; }
.u-style-707079fd11 { color:var(--status-warning-color); padding-top:2px; }
.u-style-72a68ac344 { text-align: center; }
.u-style-7521b95b4f { color: var(--primary-color); }
.u-style-7599daa8bf { padding: 1.5rem; background: color-mix(in srgb, var(--success-color) 10%, transparent); border: 1px solid color-mix(in srgb, var(--success-color) 30%, transparent); border-radius: 8px; margin-bottom: 2rem; }
.u-style-75a53ef367 { cursor:pointer; display:flex; align-items:center; gap:8px; margin:0; font-weight:700; color:var(--text-color); }
.u-style-75eac595b6 { background:color-mix(in srgb, var(--danger-color) 15%, transparent); color:var(--danger-color); padding:1rem; border-radius:8px; margin-bottom:1rem; }
.u-style-76084ee4e5 { margin-bottom:0; }
.u-style-769bd11b71 { display:flex; gap:0.75rem; align-items:center; flex-wrap:wrap; }
.u-style-775c1fdd22 { width:38px; height:38px; border-radius:10px; background:var(--background-color); border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--muted-text-color); }
.u-style-7844d44587 { grid-column: 1/-1; text-align: center; padding: 1rem; color: var(--muted-text-color); display: none; }
.u-style-79527f789a { font-size: 0.8rem; text-decoration: none; color: var(--primary-color); transition: color 0.2s; }
.u-style-7a0af9c342 { color:var(--muted-text-color); font-size:0.9rem; }
.u-style-7a2db19ba5 { display:flex; align-items:center; gap:0.85rem; }
.u-style-7b04afece2 { min-width:150px; }
.u-style-7c97897f94 { padding:1rem; border-radius:10px; background:color-mix(in srgb, var(--danger-color) 15%, transparent); color:var(--danger-color); margin-bottom:1.5rem; }
.u-style-7cf0e17058 { margin-bottom:0.2rem; }
.u-style-7d813b44de { display: none; margin-top: 1.5rem; }
.u-style-8349745312 { background:var(--primary-color); }
.u-style-846d68d9bc { color:var(--primary-color); font-weight:700; margin-bottom:0.5rem; }
.u-style-84aac67302 { display:flex; gap:1rem; align-items:center; margin-bottom:0.5rem; }
.u-style-85109fcd3f { text-align: center; margin-top: 2rem; color: var(--muted-text-color); font-size: 0.8rem; }
.u-style-855b5885ef { display:inline-flex; margin-top:0.35rem; font-size:0.7rem; background:color-mix(in srgb, var(--status-warning-color) 15%, transparent); color:var(--status-warning-color); padding:2px 6px; border-radius:999px; }
.u-style-86f1339ab8 { border:none; cursor:pointer; }
.u-style-88200310e5 { margin-top:1.5rem; border-top:1px solid var(--border-color); padding-top:1rem; }
.u-style-8a8b51a060 { padding:0.45rem 0.8rem; background:color-mix(in srgb, var(--danger-color) 15%, transparent); color:var(--danger-color); }
.u-style-8a9a162359 { text-align: center; padding: 2rem; color: var(--muted-text-color); }
.u-style-8ad17e2bf5 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.u-style-8c2000b463 { color:var(--status-warning-color); font-weight:700; margin-bottom:0.5rem; }
.u-style-8c6342abeb { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.u-style-8db1c3af75 { display:flex; align-items:center; gap:1rem; }
.u-style-8db4944842 { color:var(--muted-text-color); font-size:1.05rem; }
.u-style-8fef1eaa80 { position: sticky; bottom: 2rem; z-index: 100; }
.u-style-908ae8ad2b { margin-top:0.75rem; padding:0.75rem; border-radius:8px; background:var(--surface-color); border:1px solid var(--border-color); }
.u-style-90cbafeab7 { margin:0 0 1.25rem; color:var(--muted-text-color); text-align:center; }
.u-style-91fadc9ec1 { border:none; cursor:pointer; background:none; padding:0; }
.u-style-922cd5f836 { background:var(--border-color); color:var(--text-color); }
.u-style-93bb444b9e { font-size: 0.9rem; color: var(--muted-text-color); margin: 0; }
.u-style-97c3a988d3 { position:absolute; right:-4px; bottom:-4px; background:var(--primary-color); color:var(--button-text-color); border-radius:999px; min-width:20px; height:20px; padding:0 6px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.u-style-98662150ad { display:flex; align-items:center; gap:1rem; margin-bottom:0.5rem; }
.u-style-989e43b81e { display:flex; align-items:center; gap:0.5rem; margin-bottom:1rem; }
.u-style-9a740d0a87 { display:flex; align-items:center; gap:0.6rem; }
.u-style-9acfa6dbd2 { display:flex; gap:1rem; align-items:center; }
.u-style-9b4787cac1 { font-size: 1.2rem; display: block; color: var(--muted-text-color); font-weight: 600; }
.u-style-9be3143f02 { margin-bottom: 3rem; }
.u-style-9c8d3c0b68 { display:flex; gap:0.5rem; flex-wrap:wrap; }
.u-style-9d0b2a9846 { width: 100%; padding: 0.6rem; border: 1px solid var(--border-color); border-radius: 6px; text-transform: uppercase; }
.u-style-9ddf8fcd2a { display:none; margin-top: 1rem; }
.u-style-9e68445b40 { font-size: 0.8rem; margin-top: 0.2rem; color: var(--success-color); opacity: 0.8; }
.u-style-9ed99d3bca { width: 110px; }
.u-style-9f366b73b1 { font-size: 0.9rem; color: var(--muted-text-color); }
.u-style-9f7018461e { color: var(--muted-text-color); font-size: 0.85rem; }
.u-style-a7298bff91 { color: var(--text-secondary); margin-left: 0.5rem; }
.u-style-a8a5341de0 { width: 0%; }
.u-style-a9abf1f6dd { border:none; cursor:pointer; background:none; padding:0; font-size: 1.2rem; }
.u-style-abf60f0844 { display:inline-block; margin-bottom: 5px; }
.u-style-ad04205be3 { text-align: right; margin-bottom: 1rem; }
.u-style-ad99acdc2b { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.u-style-aef90d0d62 { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted-text-color); }
.u-style-b0e942a834 { text-align:center; padding:1.5rem; }
.u-style-b11440cc8a { color:var(--primary-color); padding-top:2px; }
.u-style-b17a51304e { display:flex; flex-direction:column; gap:0.75rem; }
.u-style-b1afd43d95 { font-size: 0.75rem; margin-top: 0.4rem; }
.u-style-b344baaa61 { margin-top: 2.5rem; background: var(--surface-color); }
.u-style-b3ed7f4fe1 { color: var(--muted-text-color); font-size: 0.95rem; line-height: 1.5; }
.u-style-b4a4de658b { font-size: 0.8rem; color: var(--muted-text-color); }
.u-style-b57afc0a59 { margin-bottom: 0.75rem; }
.u-style-b74a5c4052 { color: var(--muted-text-color); font-size: 1.1rem; }
.u-style-b76cc282a6 { margin: 2rem 0; border: 0; border-top: 1px solid var(--border-color); }
.u-style-b78f93eeef { display:inline-flex; padding:0.35rem 0.7rem; border-radius:999px; background:color-mix(in srgb, var(--status-warning-color) 15%, transparent); color:var(--status-warning-color); font-size:0.8rem; font-weight:700; }
.u-style-b7bf7a0135 { gap: 1rem; }
.u-style-b7ebd6d810 { min-width: 260px; margin-bottom: 6px; }
.u-style-bc605c49f5 { text-decoration: none; }
.u-style-bd43c47928 { padding:1rem; border-radius:10px; margin-bottom:1.5rem; }
.u-style-be8da06696 { width: 70px; }
.u-style-bece355826 { margin-bottom:1.5rem; }
.u-style-c14c0ec708 { margin-bottom: 1rem; color: var(--muted-text-color); }
.u-style-c214447ded { height: 4rem; }
.u-style-c2acb27d7e { color:var(--status-warning-color); font-size:0.95rem; line-height:1.6; margin:0 0 0.5rem; }
.u-style-c36fbf65db { background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.u-style-c3b672dfc5 { color: var(--muted-text-color); font-size: 0.9rem; line-height: 1.6; padding-left: 1.2rem; }
.u-style-c8be1ccba6 { display:none; }
.u-style-c8cb895dd2 { padding:1rem; border-radius:10px; background:var(--surface-color); border:1px solid var(--border-color); color:var(--text-color); }
.u-style-c9c02875fa { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; }
.u-style-c9ef2a58eb { margin-top:0.5rem; }
.u-style-cc2651c0af { margin-top:2.5rem; background:color-mix(in srgb, var(--status-warning-color) 10%, transparent); border-color:color-mix(in srgb, var(--status-warning-color) 15%, transparent); }
.u-style-cc2b7dbd2c { width: 100%; padding: 12px; }
.u-style-cd7a5bf46a { padding:0.5rem; border:1px solid #e2e8f0; border-radius:12px; background:var(--surface-color); }
.u-style-ceae052164 { display:flex; gap:0.75rem; margin-top:1rem; }
.u-style-cf8b536eae { padding: 1rem; background: color-mix(in srgb, var(--success-color) 15%, transparent); color: var(--success-color); border-radius: 8px; margin-bottom: 1.5rem; }
.u-style-d02143411f { background:color-mix(in srgb, var(--success-color) 15%, transparent); color:var(--success-color); padding:1rem; border-radius:10px; margin-bottom:1.5rem; }
.u-style-d11ab0c99c { margin-top: 1rem; font-size: 0.85rem; color: var(--muted-text-color); text-align: center; }
.u-style-d1b4842bfc { display:flex; gap:0.5rem; }
.u-style-d4762c2006 { padding:1rem; border-radius:10px; background:color-mix(in srgb, var(--success-color) 15%, transparent); color:var(--success-color); margin-bottom:1.5rem; }
.u-style-d4de152679 { display:flex; gap:0.45rem; flex-wrap:wrap; min-width:82px; max-width:96px; }
.u-style-d4f7536fd4 { margin-top: 1.5rem; }
.u-style-d5b43342a2 { grid-column: 1 / -1; }
.u-style-d6470223ca { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.u-style-d6e467a70a { display: flex; gap: 1rem; align-items: flex-start; }
.u-style-dab43fb936 { margin-top: 1rem; }
.u-style-dac4fe6c9b { text-align:center; }
.u-style-dae2e24bf3 { margin:0; font-weight:600; color:var(--primary-color); }
.u-style-db55330b35 { display:grid; grid-template-columns: 1fr 120px 190px 48px; gap:0.75rem; }
.u-style-dbe3c0060a { display:grid; grid-template-columns:repeat(auto-fill, minmax(60px, 1fr)); gap:0.5rem; }
.u-style-dd97d8137e { background: var(--info-color, #0ea5e9); }
.u-style-dde77b8f61 { background: color-mix(in srgb, var(--success-color) 15%, transparent); color: var(--success-color); padding: 1rem; border-radius: 8px; margin-bottom: 2rem; }
.u-style-defd519d20 { color: var(--muted-text-color); font-size: 0.9rem; margin-bottom: 1rem; }
.u-style-e06963cee0 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.u-style-e074bbc8da { width: 100%; padding: 0.6rem; border: 1px solid var(--border-color); border-radius: 6px; }
.u-style-e0c87806cf { margin:0; font-weight:normal; }
.u-style-e3085ae845 { background: var(--background-color); padding: 2px 6px; border-radius: 4px; color: var(--muted-text-color); font-family: monospace; }
.u-style-e3a9368fe2 { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--muted-text-color); font-size: 0.9rem; }
.u-style-e52a1d2428 { margin:0.35rem 0 0; font-size:0.8rem; color:var(--status-warning-color); }
.u-style-e57ef81f4d { padding: 1rem; background: color-mix(in srgb, var(--danger-color) 15%, transparent); color: var(--danger-color); border-radius: 8px; margin-bottom: 1.5rem; }
.u-style-e75588045b { color:var(--primary-color); font-weight:600; }
.u-style-e7dd0a4e83 { background:var(--surface-color); padding:15px; border-radius:12px; border:1px solid var(--border-color); margin-bottom: 10px; }
.u-style-e8aa6c90d7 { background:color-mix(in srgb, var(--primary-color) 10%, var(--surface-color)); border-color:var(--border-color); }
.u-style-e9964e39b0 { width: 100%; margin-top: 1rem; }
.u-style-ea03ff07bc { margin-bottom:2rem; }
.u-style-ebcf5f8d6a { background: color-mix(in srgb, var(--danger-color) 12%, var(--surface-color)); color: var(--danger-color); padding: 1rem; border-radius: 8px; margin-bottom: 2rem; }
.u-style-ed3aefa166 { font-size:1.4rem; font-weight:700; }
.u-style-edf2ee6e94 { margin:1rem 0; }
.u-style-ee0f101e68 { font-size: 1.4rem; font-weight: 700; }
.u-style-ef5a4549cc { background: var(--primary-color); }
.u-style-f0b24eea08 { margin-bottom: 1.5rem; }
.u-style-f267e3ca68 { margin-bottom: 1rem; }
.u-style-f2892a2e8a { display: none; }
.u-style-f2ac04c245 { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.u-style-f6d00691e3 { font-size:2rem; font-weight:800; color:var(--text-color); letter-spacing:-0.02em; }
.u-style-f74d109d64 { color: var(--success-color); margin: 0; }
.u-style-f8081798c3 { padding:1rem; border-radius:10px; background:color-mix(in srgb, var(--danger-color) 14%, var(--surface-color)); color:var(--danger-color); margin-bottom:1.5rem; }
.u-style-f98c293660 { padding: 1.5rem; background: color-mix(in srgb, var(--danger-color) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger-color) 30%, transparent); border-radius: 8px; margin-bottom: 2rem; }
.u-style-f9ee4570e5 { color:var(--status-warning-color); }
.u-style-fa011a3781 { padding: 0.75rem 1.5rem; border: none; background: var(--danger-color); color: var(--button-text-color); border-radius: 8px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--danger-color) 20%, transparent); transition: all 0.2s; }
.u-style-fa5c0fe309 { padding: 0.75rem 1.5rem; border: 1px solid var(--border-color); background: var(--surface-color); color: var(--text-color); border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.u-style-fcf1425082 { align-self: start; position: sticky; top: 2rem; }
.u-style-fd8889c909 { margin:0.35rem 0 0; color:var(--muted-text-color); }
.u-style-fe80f8a5d6 { background: var(--danger-color); }
.u-style-fefbd1a9ec { text-align: center; padding: 1rem; }


/* Additional reusable classes from remaining inline styles */
.u-style-0cd28ce9ba { display:inline; }
.u-style-1677870683 { height: 48px; border-radius: 8px; }
.u-style-2584c4d1b4 { max-height: 120px; border-radius: 8px; border: 1px solid var(--border-color); padding: 4px; }
.u-style-2f8e8ab1f2 { width:auto; }
.u-style-37495f191a { background:color-mix(in srgb, var(--primary-color) 10%, transparent); color:var(--primary-color); padding:2px 8px; border-radius:4px; margin-right: 4px; display:inline-block; margin-bottom: 2px; }
.u-style-442b16ad57 { height:50px; border-radius:4px; }
.u-style-5d291de133 { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.u-style-6123849ee4 { min-width:320px; padding:0.75rem 1rem; border:1px solid var(--border-color); border-radius:8px; }
.u-style-7521b95b4f { color: var(--primary-color); }
.u-style-78119d5040 { background:var(--border-color); }
.u-style-7c27230c8a { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.u-style-873a52e67a { width:auto; height:1.2rem; }
.u-style-925ab76aef { height: 32px; width: 32px; border: 1px solid var(--border-color); padding: 2px; }
.u-style-986a034600 { padding: 0.5rem; }
.u-style-9e3f9edef9 { display:block; width:100%; max-width:220px; height:auto; border-radius:10px; object-fit:cover; }
.u-style-ab3ab4f646 { max-width: 400px; margin: 0 auto; box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--primary-color) 24%, transparent); }
.u-style-b62d66c07e { height: 40px; }
.u-style-b711a30eca { padding:0.45rem 0.8rem; }
.u-style-bc605c49f5 { text-decoration: none; }
.u-style-d4260d2a3e { width: 60px; }
.u-style-f267e3ca68 { margin-bottom: 1rem; }
.u-style-f3ad42e56f { margin-right: 8px; text-decoration: none; font-size: 1.2rem; }

/* ==============================================
   FINAL VISUAL CLOSE: icons, components and flow
   ============================================== */
.lucide,
[data-lucide] {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    stroke-width: 2;
    vertical-align: -0.18em;
}

.btn .lucide,
.btn-primary .lucide,
.btn-secondary .lucide,
.btn-outline .lucide,
.btn-outline-dark .lucide,
.action-btn .lucide,
button .lucide,
.form-section-title .lucide,
.dashboard-card-head h3 .lucide,
.dashboard-export-link .lucide {
    width: 1rem;
    height: 1rem;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-dark,
.dashboard-export-link,
.action-btn,
.add-to-cart,
.search-btn,
.nav-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.icon-spin {
    animation: visual-icon-spin 0.8s linear infinite;
}

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

.admin-content .content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.admin-content .content-header > div {
    min-width: 0;
}

.admin-content .content-header p,
.admin-content .content-header .user-info {
    color: var(--muted-text-color);
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.25rem) !important;
    background: var(--surface-color) !important;
}

.stat-icon,
.dashboard-date-filter__icon,
.radio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--surface-color));
}

.stat-icon .lucide {
    width: 22px;
    height: 22px;
}

.stat-info {
    min-width: 0;
}

.stat-info h3 {
    margin: 0 0 0.25rem;
    color: var(--muted-text-color);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stat-value {
    margin: 0;
    color: var(--text-color);
    line-height: 1.1;
}

.dashboard-date-filter__icon .lucide,
.radio-icon .lucide {
    width: 1.2rem;
    height: 1.2rem;
}

.dashboard-card-head h3,
.form-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.dashboard-export-link {
    border-radius: var(--demo-radius-sm);
    min-height: 38px;
}

.product-feature-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
}

.product-feature-star.is-featured {
    color: var(--status-warning-color);
    fill: color-mix(in srgb, var(--status-warning-color) 35%, transparent);
}

.product-feature-star.is-featured .lucide {
    fill: currentColor;
}

.action-btn {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0 !important;
    border-radius: 8px !important;
    text-decoration: none;
}

.action-btn.view,
.action-btn.edit {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 9%, var(--surface-color));
}

.action-btn.delete {
    color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color) 9%, var(--surface-color));
}

.empty-state,
.empty-state-note,
.no-products,
.admin-table .empty-cell,
.admin-table td[colspan] {
    color: var(--muted-text-color);
    text-align: center;
}

.no-products,
.empty-state-note {
    width: 100%;
    padding: 1.25rem;
    border: 1px dashed var(--demo-line-strong);
    border-radius: var(--demo-radius);
    background: color-mix(in srgb, var(--surface-color) 80%, var(--background-color));
}

.radio-card-content {
    align-items: center;
    min-width: 0;
}

.radio-text,
.radio-title,
.radio-desc {
    min-width: 0;
}

.checkout-grid input,
.checkout-grid select,
.checkout-grid textarea,
.input-control {
    max-width: 100%;
}

.modal-content h3:first-child,
.custom-modal-content h3:first-child {
    margin-top: 0;
}

.custom-modal-content {
    width: min(100%, 460px) !important;
}

.custom-modal-actions button {
    min-height: 42px;
}

@media (max-width: 768px) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-outline-dark,
    .dashboard-export-link,
    .add-to-cart {
        min-width: 0;
        white-space: normal;
        text-align: center;
    }

    .stat-card {
        align-items: flex-start;
    }

    .dashboard-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-export-link {
        width: 100%;
    }

    .radio-card-content {
        align-items: flex-start;
    }
}

/* ==============================================
   VISUAL CORRECTION PASS 2
   Auth, forms, cards, tables and neutral premium palette
   ============================================== */

:root {
    --ui-page-bg: var(--background-color, #f8fafc);
    --ui-admin-bg: var(--background-color, #f8fafc);
    --ui-surface: var(--surface-color, #ffffff);
    --ui-surface-soft: color-mix(in srgb, var(--ui-page-bg) 72%, var(--ui-surface));
    --ui-text: var(--color-text, var(--text-color, #0f172a));
    --ui-text-muted: var(--muted-text-color, #64748b);
    --ui-border: var(--border-color, #e2e8f0);
    --ui-primary: var(--primary-color, #2563eb);
    --ui-primary-hover: var(--primary-hover, #1d4ed8);
    --ui-accent: var(--accent-color, #06b6d4);
    --ui-success: var(--success-color, #16a34a);
    --ui-danger: var(--danger-color, #dc2626);
    --ui-warning: var(--warning-color, #f59e0b);
    --ui-radius-sm: 8px;
    --ui-radius-md: 10px;
    --ui-radius-lg: 12px;
    --ui-shadow-soft: 0 14px 32px rgba(15, 23, 42, 0.08);
    --ui-shadow-card: 0 18px 45px rgba(15, 23, 42, 0.10);
    --demo-page-bg: var(--ui-page-bg);
    --demo-admin-bg: var(--ui-admin-bg);
    --demo-surface: var(--ui-surface);
    --demo-surface-soft: var(--ui-surface-soft);
    --demo-line: var(--ui-border);
    --demo-line-strong: color-mix(in srgb, var(--ui-primary) 24%, var(--ui-border));
    --demo-radius: var(--ui-radius-lg);
    --demo-radius-sm: var(--ui-radius-sm);
    --demo-shadow-soft: var(--ui-shadow-soft);
}

body.admin-login-page {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--ui-accent) 13%, transparent), transparent 34rem),
        linear-gradient(135deg, var(--ui-page-bg) 0%, color-mix(in srgb, var(--ui-primary) 7%, var(--ui-page-bg)) 100%);
    color: var(--ui-text);
    overflow-x: hidden;
}

.admin-auth-shell {
    width: 100%;
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 4vw, 3rem);
}

.admin-login-card {
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    min-width: 0 !important;
    display: grid;
    gap: 1.4rem;
    padding: clamp(1.35rem, 4vw, 2.25rem) !important;
    border: 1px solid color-mix(in srgb, var(--ui-border) 86%, white) !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(12px);
}

.admin-auth-header {
    display: grid;
    gap: 0.45rem;
    text-align: center;
}

.admin-auth-eyebrow {
    color: var(--ui-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-auth-header h1,
.admin-login-card h1,
.admin-login-card h2 {
    margin: 0 !important;
    color: var(--ui-text) !important;
    font-size: clamp(1.55rem, 5vw, 2rem) !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    text-align: center;
}

.admin-auth-header p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 0.96rem;
    line-height: 1.55;
}

.admin-login-card .login-form,
.admin-login-card .sensitive-form {
    width: 100%;
    display: grid;
    gap: 1rem;
}

.admin-login-card .field-group,
.admin-login-card .form-group {
    width: 100%;
}

.admin-login-card input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 46px !important;
    padding: 0.8rem 0.9rem !important;
    border-radius: 10px !important;
}

.admin-login-card .btn,
.admin-login-card button[type="submit"] {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    padding: 0.8rem 1rem !important;
    font-weight: 800 !important;
}

.admin-auth-footer {
    padding: 0 1rem 1.5rem;
    color: var(--ui-text-muted);
    font-size: 0.84rem;
    text-align: center;
}

body.admin-panel {
    background: var(--ui-admin-bg) !important;
}

.admin-content,
.admin-layout {
    background: var(--ui-admin-bg) !important;
}

.admin-sidebar {
    background: var(--ui-surface) !important;
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.04);
}

.content-header,
.dashboard-header {
    align-items: flex-start;
    background: transparent;
}

.content-header > div,
.dashboard-header__main {
    min-width: 0;
}

.admin-content .card,
.admin-content .panel-card,
.admin-content .form-card,
.admin-content .settings-card,
.admin-content .pos-card,
.admin-content .campaign-panel,
.admin-content .migration-card,
.checkout-step,
.summary-card,
.auth-card,
.contact-card,
.contact-form,
.product-card,
.promo-card,
.category-tile,
.trust-item,
.custom-modal-content,
.modal-content,
.pos-modal__dialog {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.admin-content .card,
.admin-content .panel-card,
.admin-content .form-card,
.admin-content .settings-card,
.admin-content .pos-card {
    padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.form-shell,
.styled-form,
.sensitive-form,
.contact-form,
.profile-security-form,
.category-form,
.pos-form-grid {
    width: 100%;
    min-width: 0;
}

.form-row,
.form-grid,
.settings-grid,
.info-grid,
.contact-grid,
.pos-form-grid,
.promo-grid,
.campaign-grid,
.category-form__grid,
.grid-2-col {
    min-width: 0;
    align-items: start;
}

.form-row,
.form-grid,
.info-grid,
.settings-grid,
.pos-form-grid,
.grid-2-col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
}

.form-group,
.field-group,
.input-group,
.pos-form-field {
    min-width: 0;
    margin-bottom: 0;
}

.form-section {
    border-color: var(--ui-border) !important;
    background: color-mix(in srgb, var(--ui-surface) 96%, var(--ui-page-bg)) !important;
}

.form-section-title,
.form-section h3,
.form-section h4,
.panel-card > h3:first-child,
.pos-card > h3:first-child,
.pos-card > h4:first-child {
    color: var(--ui-text) !important;
    line-height: 1.25;
    letter-spacing: 0;
}

.form-control,
.input-control,
.select-control,
.textarea-control,
.form-select,
.styled-form input:not([type="checkbox"]):not([type="radio"]),
.styled-form select,
.styled-form textarea,
.sensitive-form input:not([type="checkbox"]):not([type="radio"]),
.sensitive-form select,
.sensitive-form textarea,
.contact-form-field,
.admin-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.admin-content select,
.admin-content textarea,
.pos-inline-actions input,
.newsletter-form input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 44px;
    border-color: var(--input-border-color, var(--ui-border)) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--input-background, var(--ui-surface)) !important;
    color: var(--ui-text) !important;
}

input[type="file"].form-control,
.admin-content input[type="file"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.admin-content input[type="checkbox"],
.admin-content input[type="radio"],
.styled-form input[type="checkbox"],
.styled-form input[type="radio"],
.sensitive-form input[type="checkbox"],
.sensitive-form input[type="radio"] {
    flex: 0 0 auto;
}

.form-control:focus,
.input-control:focus,
.select-control:focus,
.textarea-control:focus,
.form-select:focus,
.styled-form input:focus,
.styled-form select:focus,
.styled-form textarea:focus,
.sensitive-form input:focus,
.sensitive-form select:focus,
.sensitive-form textarea:focus,
.admin-content input:focus,
.admin-content select:focus,
.admin-content textarea:focus,
.newsletter-form input:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 18%, transparent) !important;
    outline: none !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-dark,
.action-btn,
.variant-btn,
.btn-save,
.btn-save-full,
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    border-radius: var(--ui-radius-sm) !important;
    line-height: 1.2;
}

.btn-primary,
button[type="submit"].btn-primary,
.btn-save,
.btn-save-full {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--button-text-color, #ffffff) !important;
    background-image: none !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ui-primary) 18%, transparent);
}

.btn-primary:hover,
button[type="submit"].btn-primary:hover,
.btn-save:hover,
.btn-save-full:hover {
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
}

.btn-secondary {
    background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--ui-primary) 22%, var(--ui-border)) !important;
    color: var(--ui-primary) !important;
    background-image: none !important;
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--ui-primary) 15%, var(--ui-surface)) !important;
}

.admin-table,
.campaign-table,
.rate-table,
.items-table,
.orders-table,
.cart-table,
.pos-table {
    color: var(--ui-text);
}

.admin-table th,
.campaign-table th,
.rate-table th,
.items-table th,
.orders-table th,
.cart-table th,
.pos-table th {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-text-muted) !important;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-table td,
.campaign-table td,
.rate-table td,
.items-table td,
.orders-table td,
.cart-table td,
.pos-table td {
    border-bottom: 1px solid var(--ui-border) !important;
}

.empty-state,
.empty-state-note,
.variant-empty-note {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-soft) !important;
    color: var(--ui-text-muted) !important;
}

.status-badge.completed,
.growth-badge--positive {
    background: color-mix(in srgb, var(--ui-success) 12%, var(--ui-surface)) !important;
    color: var(--ui-success) !important;
}

.status-badge.cancelled,
.alert-danger,
.alert-error {
    background: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-surface)) !important;
    color: var(--ui-danger) !important;
}

.alert-warning,
.shipping-warning {
    background: color-mix(in srgb, var(--ui-warning) 12%, var(--ui-surface)) !important;
    border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border)) !important;
    color: color-mix(in srgb, var(--ui-warning) 82%, #92400e) !important;
}

@media (max-width: 768px) {
    .admin-auth-shell {
        align-items: center;
        padding: 1rem;
    }

    .admin-login-card {
        width: min(100%, 420px) !important;
        padding: 1.25rem !important;
    }

    .content-header,
    .dashboard-header,
    .admin-card-row {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-actions,
    .inline-actions,
    .button-row,
    .pos-inline-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-actions .btn,
    .inline-actions .btn,
    .button-row .btn,
    .pos-inline-actions .btn,
    .pos-inline-actions button {
        width: 100%;
    }
}