/* ========================================================================= premium.css — Visual premium COMPARTILHADO (fonte única de verdade). Como usar: adicione class="premium" no e linke este arquivo. Escopo por .premium — só afeta as páginas que optarem, não vaza para o resto do dashboard. Valores portados do Router Monitor (a referência). ========================================================================= */ .premium { --pm-border: rgba(255, 255, 255, 0.10); --pm-glow: rgba(139, 92, 246, 0.18); --pm-accent: #8B5CF6; } /* Revela o glow de fundo do body mesmo em páginas cujo .main-content é opaco */ body.premium .main-content { background: transparent; } /* ---- Header ---- */ .premium .glass-header { padding: 20px 28px; border: 1px solid var(--pm-border); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ---- Título: 24px + degradê só no texto (emoji fica intacto via .premium-title) ---- */ .premium .header-left h1, .premium .page-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin: 0; } .premium .premium-title { background: linear-gradient(135deg, #F1F5F9 0%, #A78BFA 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---- Botão de voltar: IDÊNTICO ao .back-btn-modern do router (seta em quadradinho 40x40) ---- */ .premium .back-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; gap: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary); text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .premium .back-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(-4px); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); } /* Some qualquer texto do botão — o router é só a seta */ .premium .back-btn .back-text { display: none; } /* ---- Cards premium: gradiente + borda + barra de acento + glow no hover ---- */ .premium .glass-card, .premium .modern-table-wrapper { position: relative; background: linear-gradient(145deg, var(--bg-card) 0%, rgba(10, 15, 25, 0.70) 100%); border: 1px solid var(--pm-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .premium .glass-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, transparent, var(--pm-accent), transparent); opacity: 0.6; pointer-events: none; } /* Tabelas não ganham barra de acento (evita barra dupla em cards aninhados) */ .premium .modern-table-wrapper::before { content: none; } .premium .glass-card:hover, .premium .modern-table-wrapper:hover { border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.40), 0 0 20px var(--pm-glow); } /* ---- Botões ---- */ /* Primário (Ranking / Filtrar / Buscar): gradiente roxo + glow */ .premium .btn.btn-primary { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 4px 14px rgba(139, 92, 246, 0.30); transition: all 0.3s ease; } .premium .btn.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(139, 92, 246, 0.45); } /* Secundário (Pausar / Atualizar): glass */ .premium .btn.btn-secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--pm-border); color: var(--text-primary); transition: all 0.3s ease; } .premium .btn.btn-secondary:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); transform: translateY(-2px); box-shadow: 0 0 15px rgba(255, 255, 255, 0.08); } /* Ghost (Detalhes) */ .premium .gs-btn-ghost { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--pm-border); } .premium .gs-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 0 15px rgba(255, 255, 255, 0.06); }