/* ========================================
   RESET E BASE - OTIMIZADO
   ======================================== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   height: 100%;
   -webkit-text-size-adjust: 100%;
}

body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   background: #0a1628 !important;
   color: #fff !important;
   min-height: 100vh;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Remover elementos do tema */
.header, header, .navbar, .logo, .footer,
nav, .page-header, .page-title {
   display: none !important;
   visibility: hidden !important;
}

main {
   position: relative;
   min-height: 100vh;
   width: 100%;
}

/* ========================================
   BACKGROUND - SIMPLIFICADO
   ======================================== */
.bg-gradient {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   background: 
      radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.15) 0%, transparent 50%);
   pointer-events: none;
}

/* ========================================
   HERO SECTION - OTIMIZADO
   ======================================== */
.hero-section {
   position: relative;
   z-index: 1;
   text-align: center;
   padding: 60px 20px 40px;
}

.hero-content {
   max-width: 800px;
   margin: 0 auto;
}

.hero-label {
   display: inline-block;
   font-size: 0.85rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.6);
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 16px;
}

.hero-title {
   font-size: 3.5rem;
   font-weight: 800;
   background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1.2;
   margin-bottom: 20px;
}

.hero-title h1 {
   margin: 0 !important;
   padding: 0 !important;
   display: inline !important;
   font-size: inherit !important;
   font-weight: inherit !important;
   background: inherit !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
}

/* ========================================
   DASHBOARD WRAPPER
   ======================================== */
.dashboard-wrapper {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px 60px;
   position: relative;
   z-index: 1;
}

/* ========================================
   CATEGORY NAVIGATION - OTIMIZADO
   ======================================== */
.category-nav-sticky {
   position: sticky;
   top: 20px;
   z-index: 100;
   margin-bottom: 40px;
}

.category-nav-container {
   position: relative;
   background: rgba(15, 23, 42, 0.8);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   padding: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.category-scroll {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   padding: 4px;
}

.category-scroll::-webkit-scrollbar {
   display: none;
}

/* Botões de navegação */
.nav-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 36px;
   height: 36px;
   background: linear-gradient(135deg, #3b82f6, #2563eb);
   border: none;
   border-radius: 50%;
   color: white;
   font-size: 14px;
   cursor: pointer;
   z-index: 10;
   transition: all 0.2s;
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
   opacity: 0;
   pointer-events: none;
}

.nav-arrow:hover {
   transform: translateY(-50%) scale(1.1);
}

.nav-arrow:active {
   transform: translateY(-50%) scale(0.95);
}

.nav-left {
   left: -12px;
}

.nav-right {
   right: -12px;
}

/* ========================================
   CATEGORY BUTTONS - OTIMIZADO
   ======================================== */
.category-btn {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 20px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   color: rgba(255, 255, 255, 0.9);
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
   transition: all 0.2s;
   font-family: inherit;
}

.category-btn i {
   font-size: 1.1rem;
   color: #60a5fa;
}

.category-btn:hover {
   background: rgba(59, 130, 246, 0.2);
   border-color: rgba(59, 130, 246, 0.4);
   transform: translateY(-2px);
}

.category-btn.active {
   background: linear-gradient(135deg, #3b82f6, #2563eb);
   border-color: #3b82f6;
   box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.category-btn.active i {
   color: white;
}

/* ========================================
   CONTENT AREA
   ======================================== */
.content-area {
   min-height: 400px;
}

.hidden {
   display: none !important;
}

/* ========================================
   WELCOME STATE - OTIMIZADO
   ======================================== */
.welcome-state {
   background: rgba(15, 23, 42, 0.6);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   padding: 80px 30px;
   text-align: center;
}

.welcome-icon {
   font-size: 3.5rem;
   color: #60a5fa;
   margin-bottom: 24px;
   display: inline-block;
}

.welcome-state h2 {
   font-size: 1.8rem;
   color: #fff;
   margin-bottom: 12px;
   font-weight: 700;
}

.welcome-state p {
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.6);
   max-width: 400px;
   margin: 0 auto;
}

/* ========================================
   SERVICE SECTION - OTIMIZADO
   ======================================== */
.service-section {
   animation: fadeIn 0.3s ease;
}

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

.section-header {
   margin-bottom: 28px;
   padding-bottom: 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header h2 {
   font-size: 1.6rem;
   color: #fff;
   margin-bottom: 8px;
   font-weight: 700;
}

.section-desc {
   color: rgba(255, 255, 255, 0.6);
   font-size: 0.95rem;
   line-height: 1.5;
}

.section-desc p {
   margin: 0;
}

/* ========================================
   SERVICE GRID - OTIMIZADO
   ======================================== */
.service-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 20px;
}

.service-item {
   position: relative;
   background: rgba(15, 23, 42, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   overflow: hidden;
   transition: all 0.2s;
}

.service-item:hover {
   transform: translateY(-4px);
   border-color: rgba(59, 130, 246, 0.5);
   box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.service-btn {
   width: 100%;
   background: transparent;
   border: none;
   padding: 28px 20px;
   color: #fff;
   text-align: center;
   cursor: pointer;
   font-family: inherit;
}

.service-qty {
   font-size: 2rem;
   font-weight: 800;
   color: #60a5fa;
   margin-bottom: 8px;
   transition: transform 0.2s;
}

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

.service-title {
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 600;
   margin-bottom: 8px;
   line-height: 1.3;
}

.service-value {
   font-size: 1.25rem;
   color: #fff;
   font-weight: 700;
}

/* ========================================
   DISCOUNT - OTIMIZADO
   ======================================== */
.has-discount {
   border-color: #3b82f6;
   box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.discount-tag {
   position: absolute;
   top: 12px;
   right: -28px;
   background: linear-gradient(135deg, #f59e0b, #d97706);
   color: white;
   padding: 4px 32px;
   font-size: 0.7rem;
   font-weight: 700;
   transform: rotate(45deg);
   box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state {
   grid-column: 1 / -1;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 60px 20px;
   color: rgba(255, 255, 255, 0.5);
}

.empty-state i {
   font-size: 3rem;
   margin-bottom: 16px;
   color: #3b82f6;
   opacity: 0.5;
}

.empty-state p {
   font-size: 1rem;
}

/* ========================================
   RESPONSIVE - OTIMIZADO
   ======================================== */
@media (min-width: 768px) {
   .service-grid {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 24px;
   }
   
   .hero-title {
      font-size: 4.5rem;
   }
   
   .service-qty {
      font-size: 2.2rem;
   }
}

@media (min-width: 1024px) {
   .dashboard-wrapper {
      padding: 0 40px 80px;
   }
   
   .service-grid {
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 28px;
   }
   
   .hero-title {
      font-size: 5rem;
   }
}

@media (max-width: 767px) {
   .hero-section {
      padding: 50px 20px 30px;
   }
   
   .hero-title {
      font-size: 2.5rem;
   }
   
   .dashboard-wrapper {
      padding: 0 16px 40px;
   }
   
   .service-grid {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 16px;
   }
   
   .service-qty {
      font-size: 1.75rem;
   }
   
   .service-title {
      font-size: 0.85rem;
   }
   
   .service-value {
      font-size: 1.1rem;
   }
   
   .category-nav-sticky {
      top: 10px;
      margin-bottom: 30px;
   }
   
   .page-footer {
      padding: 40px 20px;
      margin-top: 60px;
   }
   
   .footer-brand {
      font-size: 1.05rem;
   }
   
   .footer-text {
      font-size: 0.8rem;
   }
}

@media (max-width: 480px) {
   .hero-title {
      font-size: 2rem;
   }
   
   .hero-section {
      padding: 40px 16px 25px;
   }
   
   .hero-label {
      font-size: 0.75rem;
      letter-spacing: 1.5px;
   }
   
   .page-footer {
      padding: 35px 20px;
      margin-top: 50px;
   }
   
   .footer-brand {
      font-size: 1rem;
   }
   
   .footer-text {
      font-size: 0.75rem;
   }
}

/* ========================================
   PERFORMANCE - WILL-CHANGE
   ======================================== */
.category-scroll,
.service-item,
.category-btn {
   will-change: transform;
}

/* ========================================
   ACESSIBILIDADE
   ======================================== */
button:focus-visible {
   outline: 2px solid #60a5fa;
   outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}