/* ========================================================================== SKYWHITE — Design System único (Navy Elegante / Premium) Bootstrap 5 + CSS3 + Swiper — um único arquivo para todas as páginas ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root{ /* Paleta — Azul marinho */ --navy-950:#050914; --navy-900:#0a0f24; --navy-850:#0d1330; --navy-800:#111a3d; --navy-700:#162249; --navy-600:#1c2c5a; --navy-500:#243872; --line:rgba(140,165,230,.14); --line-strong:rgba(140,165,230,.28); --blue:#3f6bff; --blue-light:#6f95ff; --blue-dim:rgba(63,107,255,.14); --silver:#c6d0ee; --gold:#d3b872; --text-1:#eef2ff; --text-2:#a9b4dc; --text-3:#7885b3; --success:#33d69f; --danger:#ff5d78; --warning:#ffb95a; --info:#57a7ff; --radius-sm:10px; --radius:16px; --radius-lg:24px; --font-display:'Sora', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'JetBrains Mono', monospace; --shadow-soft:0 20px 60px -20px rgba(0,6,30,.65); --shadow-glow:0 0 0 1px var(--line), 0 20px 50px -25px rgba(63,107,255,.35); } /* ========================================================================== ⚠️ REGRA OBRIGATÓRIA — NUNCA IGNORAR (tema escuro + Bootstrap 5.3+) ========================================================================== O Bootstrap 5.3+ define variáveis de cor (--bs-body-bg, --bs-table-bg, --bs-card-bg, --bs-modal-bg, --bs-form-select-bg, etc.) que por padrão são CLARAS (branco). Vários componentes nativos (.table, .card, .modal, .form-select, .dropdown-menu, .list-group, .alert...) aplicam `background-color: var(--bs-*-bg)` internamente. Isso já causou um bug real neste projeto: a tabela de logs (.table) ficava com fundo branco por baixo do card escuro, porque ninguém sobrescreveu --bs-table-bg. Ao criar QUALQUER página/componente novo usando classes do Bootstrap, siga SEMPRE estes passos, nessa ordem: 1) Coloque `data-bs-theme="dark"` na tag do arquivo .html. Isso ativa `color-scheme: dark` nativo (corrige selects, scrollbars, inputs nativos) e já ajusta a maioria das variáveis do Bootstrap. 2) MESMO ASSIM, nunca confie só no data-bs-theme: sobrescreva de forma explícita o background (ou a variável --bs-*-bg específica) de todo componente Bootstrap usado, com as cores do design system deste arquivo (--navy-800, --navy-850, --navy-950 etc). Exemplo já aplicado abaixo na regra `.table`. 3) Nunca use um componente Bootstrap "cru" sem revisar — sempre inspecione se ele expõe uma --bs-*-bg e force o valor certo, em vez de assumir que o tema escuro geral resolve sozinho. ========================================================================== */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background: radial-gradient(1100px 620px at 12% -8%, rgba(63,107,255,.16), transparent 60%), radial-gradient(900px 500px at 100% 10%, rgba(63,107,255,.10), transparent 55%), linear-gradient(180deg, var(--navy-950), var(--navy-900) 40%, var(--navy-950)); background-attachment:fixed; color:var(--text-1); font-family:var(--font-body); min-height:100vh; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6{font-family:var(--font-display); letter-spacing:-.02em; color:var(--text-1);} code, .mono{font-family:var(--font-mono);} a{color:var(--blue-light); text-decoration:none;} a:hover{color:var(--blue-light); opacity:.85;} ::selection{background:var(--blue); color:#fff;} ::-webkit-scrollbar{width:10px; height:10px;} ::-webkit-scrollbar-track{background:var(--navy-950);} ::-webkit-scrollbar-thumb{background:var(--navy-600); border-radius:10px; border:2px solid var(--navy-950);} .hidden{display:none !important;} /* ========================================================================== Utilidades de compatibilidade (mantém a estrutura HTML original) ========================================================================== */ .mr-1{margin-right:.25rem!important;} .mr-2{margin-right:.5rem!important;} .mr-3{margin-right:1rem!important;} .mr-lg-3{margin-right:1rem!important;} .ml-1{margin-left:.25rem!important;} .ml-2{margin-left:.5rem!important;} .ml-auto{margin-left:auto!important;} .btn-block{display:block; width:100%;} .form-row{display:flex; flex-wrap:wrap; margin-right:-8px; margin-left:-8px;} .form-row>[class*="col-"]{padding-right:8px; padding-left:8px;} .custom-control{position:relative; display:block; min-height:1.6rem; padding-left:2rem;} .custom-control-input{position:absolute; left:0; top:.1rem; width:1.25rem; height:1.25rem; accent-color:var(--blue); cursor:pointer;} .custom-control-label{margin-bottom:0; cursor:pointer; color:var(--text-2);} .bg-black{background:transparent!important;} .text-white{color:var(--text-1)!important;} /* ========================================================================== Tipografia utilitária ========================================================================== */ .title-font{font-family:var(--font-display);} .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1.1rem; border-radius:100px; background:var(--blue-dim); border:1px solid var(--line-strong); color:var(--blue-light); font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .text-muted-2{color:var(--text-2)!important;} .text-muted-3{color:var(--text-3)!important;} .text-accent{color:var(--blue-light);} .text-gold{color:var(--gold);} /* ========================================================================== Superfícies em vidro (glass) ========================================================================== */ .glass{ background:linear-gradient(180deg, rgba(20,30,66,.55), rgba(13,19,48,.55)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); } .surface-card{ background:linear-gradient(165deg, var(--navy-800), var(--navy-850)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); } /* ========================================================================== Navbar — site ========================================================================== */ .navbar-navy{ position:fixed; inset:0 0 auto 0; z-index:1030; background:rgba(8,12,28,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .brand-mark{position:relative; width:42px; height:42px; display:flex; align-items:center; justify-content:center;} .brand-mark::before{ content:""; position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle, rgba(63,107,255,.4), transparent 70%); filter:blur(6px); } .brand-mark img{position:relative; width:30px; height:30px; object-fit:contain;} .brand-name{font-family:var(--font-display); font-weight:700; font-size:1.4rem; letter-spacing:-.03em;} .brand-name .hi{color:var(--blue-light);} /* ========================================================================== Botões ========================================================================== */ .btn{border-radius:12px; font-weight:600; font-family:var(--font-body); letter-spacing:.01em;} .btn-navy-primary{ background:linear-gradient(135deg, var(--blue), #2a4fd6); color:#fff; border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 30px -10px rgba(63,107,255,.55); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn-navy-primary:hover{transform:translateY(-1px); filter:brightness(1.08); color:#fff; box-shadow:0 16px 36px -12px rgba(63,107,255,.65);} .btn-navy-outline{ background:transparent; color:var(--text-1); border:1px solid var(--line-strong); transition:all .2s ease; } .btn-navy-outline:hover{background:rgba(255,255,255,.05); color:#fff; border-color:var(--blue-light);} .btn-navy-ghost{background:transparent; border:none; color:var(--text-2);} .btn-navy-ghost:hover{color:var(--text-1);} /* Overrides globais dos botões Bootstrap para o tema */ .btn-primary{background:linear-gradient(135deg, var(--blue), #2a4fd6); border-color:transparent;} .btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,#4c76ff,#2a4fd6); border-color:transparent;} .btn-success{background:var(--success); border-color:var(--success); color:#04241a;} .btn-danger{background:var(--danger); border-color:var(--danger);} .btn-secondary{background:var(--navy-600); border-color:var(--navy-600); color:var(--text-1);} .btn-outline-light{border-color:var(--line-strong); color:var(--text-1);} .btn-outline-light:hover{background:rgba(255,255,255,.06); color:#fff; border-color:var(--blue-light);} .btn-info{background:var(--info); border-color:var(--info); color:#04182f;} /* ========================================================================== HERO ========================================================================== */ .hero-section{position:relative; padding-top:9rem; padding-bottom:5rem; overflow:hidden;} .hero-grid{ position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 10%, transparent 75%); opacity:.5; } #particles{position:absolute; inset:0; overflow:hidden; pointer-events:none;} .particle{ position:absolute; bottom:-10px; border-radius:50%; background:radial-gradient(circle, var(--blue-light), transparent 70%); animation:float-up linear infinite; } @keyframes float-up{ 0%{transform:translateY(0) translateX(0); opacity:0;} 10%{opacity:.7;} 100%{transform:translateY(-110vh) translateX(30px); opacity:0;} } .hero-logo-wrap{position:relative; display:flex; align-items:center; justify-content:center;} .hero-logo-glow{position:absolute; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(63,107,255,.28), transparent 70%); filter:blur(10px);} .hero-logo{position:relative; width:340px; max-width:70vw; filter:drop-shadow(0 30px 60px rgba(63,107,255,.35));} .slow-spin{animation:spin 30s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} .scroll-cue{position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem;} .scroll-cue span{font-size:.7rem; letter-spacing:.25em; color:var(--text-3); font-family:var(--font-mono);} .scroll-pill{width:26px; height:42px; border:2px solid var(--line-strong); border-radius:100px; display:flex; justify-content:center; padding-top:8px;} .scroll-dot{width:4px; height:10px; border-radius:10px; background:var(--blue-light); animation:bounce-dot 1.6s ease infinite;} @keyframes bounce-dot{0%,100%{transform:translateY(0); opacity:1;} 50%{transform:translateY(10px); opacity:.3;}} /* ========================================================================== Seção de recursos ========================================================================== */ .section{padding:6rem 0;} .section-head{text-align:center; margin-bottom:3.5rem;} .section-head h2{font-size:clamp(1.9rem, 4vw, 2.9rem); margin-top:1rem; font-weight:700;} .feature-card{ padding:2.4rem 2rem; height:100%; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .feature-card:hover{transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow-glow);} .feature-icon{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--blue-dim); color:var(--blue-light); font-size:1.4rem; margin-bottom:1.6rem; } .feature-card h3{font-size:1.4rem; margin-bottom:.6rem;} .feature-card p{color:var(--text-2); font-size:.96rem; line-height:1.65; margin-bottom:0;} .feature-foot{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.75rem; color:var(--text-3); } .feature-foot b{color:var(--blue-light); font-weight:600;} .stat-big{font-family:var(--font-mono); font-size:2.6rem; font-weight:700; color:var(--blue-light);} /* ========================================================================== Planos — grid centralizado ========================================================================== */ .pi{ position:relative; display:flex; flex-direction:column; align-items:center; max-width:440px; margin:0 auto; padding:1.8rem 1.2rem 1.2rem; border-radius:28px; overflow:hidden; background:rgba(255,255,255,.02); border:1px solid var(--line); transition:border-color .4s; } .pi-bg{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, var(--h, #6366f1)08, transparent 70%); transition:background .5s; pointer-events:none; } .pi-seg{ position:relative; display:flex; gap:3px; padding:3px; border-radius:100px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); z-index:2; margin-bottom:1.2rem; } .pi-seg-btn{ position:relative; z-index:2; display:flex; align-items:center; gap:5px; padding:7px 14px; border-radius:100px; border:none; background:transparent; color:var(--text-3); font-size:.72rem; font-weight:600; cursor:pointer; transition:color .3s; white-space:nowrap; font-family:var(--font-body); } .pi-seg-btn i{font-size:.7rem;} .pi-seg-btn.on{color:var(--text-1);} .pi-seg-slider{ position:absolute; top:3px; bottom:3px; z-index:1; border-radius:100px; transition:left .35s cubic-bezier(.22,.61,.36,1), width .35s cubic-bezier(.22,.61,.36,1), background .35s; box-shadow:0 2px 8px rgba(0,0,0,.15); } .pi-card{ position:relative; z-index:2; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem 1.5rem 1.5rem; border-radius:20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); overflow:hidden; } .pi-glow{ position:absolute; inset:-50%; pointer-events:none; transition:background .5s; } .pi-icon{ width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:.8rem; position:relative; z-index:1; transition:background .35s, color .35s; } .pi-icon i{display:inline-block;} .pi-tag-c{position:relative; z-index:1;} .pi-tag{ display:inline-block; font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.22rem .7rem; border-radius:100px; border:1px solid; margin-bottom:.6rem; } .pi-name{ font-size:1.05rem; font-weight:600; color:var(--text-1); margin-bottom:.15rem; position:relative; z-index:1; } .pi-price{ font-family:var(--font-display); font-size:2.8rem; font-weight:800; line-height:1; margin:.6rem 0 .2rem; position:relative; z-index:1; transition:color .35s; } .pi-val{font-variant-numeric:tabular-nums;} .pi-per{font-size:.78rem; font-weight:500; font-family:var(--font-body); display:block; margin-top:3px; transition:color .35s;} .pi-cta{ display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 2rem; border-radius:100px; font-weight:600; font-size:.9rem; border:none; cursor:pointer; margin-top:1.2rem; transition:all .35s cubic-bezier(.22,.61,.36,1); position:relative; z-index:2; } .pi-cta:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 8px 25px rgba(0,0,0,.25);} .pi-cta i{font-size:.7rem; transition:transform .25s;} .pi-cta:hover i{transform:translateX(4px);} .pi-feats{ width:100%; margin-top:1.2rem; padding:.9rem 1rem; border-radius:12px; background:rgba(255,255,255,.02); border:1px solid var(--line); position:relative; z-index:2; } .pi-feats-lbl{ font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin-bottom:.6rem; text-align:center; } .pi-feats-lbl i{color:#818cf8; margin-right:.3rem;} .pi-feats-g{display:flex; flex-wrap:wrap; justify-content:center; gap:.2rem .8rem;} .pi-feats-g span{font-size:.75rem; color:var(--text-2); display:inline-flex; align-items:center; gap:.25rem;} .pi-feats-g span i{color:var(--success); font-size:.55rem;} @keyframes piFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .planos-intro{text-align:center; color:var(--text-3); font-size:.92rem; max-width:580px; margin:0 auto 1.8rem; line-height:1.6;} /* ========================================================================== Footer ========================================================================== */ .footer-navy{border-top:1px solid var(--line); padding:4rem 0 2.4rem; animation:footerIn .5s cubic-bezier(.22,.61,.36,1);} .footer-navy .brand-name{font-size:1.6rem;} .footer-links a{color:var(--text-2); font-size:.92rem; transition:color .2s;} .footer-links a:hover{color:var(--blue-light);} .footer-copy{color:var(--text-3); font-size:.85rem;} @keyframes footerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* Section transitions */ #painel-sections > .card{will-change:opacity,transform;} #painel-sections > .card:not(.hidden){animation:sectionIn .4s cubic-bezier(.22,.61,.36,1);} @keyframes sectionIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* ========================================================================== Overlay de autenticação (login / registro / reset) ========================================================================== */ .site-login-overlay{ position:fixed; inset:0; z-index:1050; display:flex; align-items:center; justify-content:center; background:rgba(5,8,18,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:1.2rem; } .auth-glass-card{ width:100%; max-width:400px; padding:2.6rem 2.2rem; border-radius:var(--radius-lg); background:linear-gradient(165deg, var(--navy-800), var(--navy-900)); border:1px solid var(--line-strong); box-shadow:0 30px 80px -20px rgba(0,0,0,.6), var(--shadow-glow); animation:pop-in .25s ease; } @keyframes pop-in{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}} .auth-glass-card h2{font-size:1.3rem; text-align:center; margin-bottom:1.8rem; font-weight:700;} .auth-glass-card h2 span{color:var(--blue-light);} .auth-glass-input{ width:100%; padding:.85rem 1.1rem; margin-bottom:1rem; background:var(--navy-950); border:1px solid var(--line); border-radius:12px; color:var(--text-1); font-family:var(--font-body); font-size:.95rem; transition:border-color .2s ease, box-shadow .2s ease; } .auth-glass-input::placeholder{color:var(--text-3);} .auth-glass-input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-dim);} .auth-glass-btn-primary{ width:100%; padding:.9rem; border:none; border-radius:12px; background:linear-gradient(135deg, var(--blue), #2a4fd6); color:#fff; font-weight:700; box-shadow:0 10px 30px -10px rgba(63,107,255,.55); transition:filter .2s ease, transform .2s ease; } .auth-glass-btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px);} .auth-glass-btn-secondary{ width:100%; padding:.75rem; margin-top:.6rem; border-radius:12px; background:transparent; border:1px solid transparent; color:var(--text-2); font-size:.88rem; transition:color .2s ease; } .auth-glass-btn-secondary:hover{color:var(--text-1);} /* ========================================================================== CHECKOUT LABELS / STATUS (loja) ========================================================================== */ .checkout-hint{ color:var(--text-2); font-size:.88rem; line-height:1.5; margin:-.8rem 0 1.6rem; } .checkout-status{ display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.88rem; color:var(--text-2); margin-bottom:1.2rem; min-height:1.4rem; } .checkout-status.ok{ color:var(--success); } .checkout-status.expired{ color:var(--warning); } .checkout-page-message{ color:var(--text-2); font-size:.95rem; margin-bottom:1.4rem; } /* ========================================================================== LOGIN PANEL (Discord) ========================================================================== */ .login-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); } .login-overlay.hidden { display: none; } .login-card { background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,41,59,.9)); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 3rem 2.5rem; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 25px 60px rgba(0,0,0,.5); position: relative; } .login-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #64748b; font-size: 1.6rem; cursor: pointer; line-height: 1; } .login-close:hover { color: #fff; } .login-logo { width: 72px; height: 72px; margin-bottom: .5rem; } .login-brand { font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; } .login-sub { color: #94a3b8; font-size: .9rem; margin: .5rem 0 1.8rem; } .login-discord-btn { display: inline-flex; align-items: center; gap: 10px; background: #5865F2; color: #fff; border: none; border-radius: 12px; padding: 14px 32px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all .2s; } .login-discord-btn:hover { background: #4752c4; transform: scale(1.02); } .login-discord-btn i { font-size: 1.3rem; } .login-footer { color: #475569; font-size: .75rem; margin-top: 1.2rem; } /* ========================================================================== DASHBOARD (painel.html / admin.html) ========================================================================== */ .navbar-dashboard{ background:rgba(8,12,28,.85)!important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:.9rem 1.5rem; } .navbar-dashboard .navbar-brand{font-family:var(--font-display); font-weight:700; color:var(--text-1)!important; display:flex; align-items:center;} .navbar-dashboard .navbar-brand i{color:var(--blue-light);} .navbar-toggler{border-color:var(--line-strong);} .container, .container-fluid{position:relative; z-index:1;} .alert{border-radius:var(--radius-sm); border:1px solid var(--line); font-size:.92rem;} .alert-warning{background:rgba(255,185,90,.1); color:var(--warning); border-color:rgba(255,185,90,.3);} .alert-info{background:rgba(87,167,255,.1); color:var(--info); border-color:rgba(87,167,255,.3);} .alert-danger{background:rgba(255,93,120,.1); color:var(--danger); border-color:rgba(255,93,120,.3);} .alert-success{background:rgba(51,214,159,.1); color:var(--success); border-color:rgba(51,214,159,.3);} .card{ background:linear-gradient(165deg, var(--navy-800), var(--navy-850)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); margin-bottom:1.5rem; } .card-header{ background:linear-gradient(135deg, var(--blue), #2a4fd6)!important; border-bottom:none; border-radius:var(--radius) var(--radius) 0 0!important; font-weight:600; color:#fff; padding:1.1rem 1.5rem; } .card-body{padding:1.6rem;} .stat-card{ display:flex; align-items:center; gap:1.2rem; padding:1.5rem; background:linear-gradient(165deg, var(--navy-800), var(--navy-850)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); height:100%; } .stat-icon{ width:54px; height:54px; min-width:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--blue-dim); color:var(--blue-light); font-size:1.3rem; } .stat-content h6{color:var(--text-3); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; font-weight:600;} .stat-content p{font-family:var(--font-display); font-size:1.9rem; font-weight:700; margin:0; color:var(--text-1);} .nav-tabs{border-bottom:1px solid var(--line);} .nav-tabs .nav-link{color:var(--text-2); border:none; border-bottom:2px solid transparent; font-weight:600; padding:.8rem 1.2rem;} .nav-tabs .nav-link:hover{border-color:transparent; color:var(--text-1);} .nav-tabs .nav-link.active{background:transparent; color:var(--blue-light); border-bottom-color:var(--blue-light);} .table{ --bs-table-bg:transparent; --bs-table-color:var(--text-1); --bs-table-striped-bg:transparent; --bs-table-hover-bg:transparent; --bs-table-border-color:var(--line); background-color:transparent!important; color:var(--text-1); margin-bottom:0; } .table-responsive{background:transparent;} .table thead th{ border-bottom:1px solid var(--line-strong); color:var(--text-3); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; } .table td, .table th{border-color:var(--line); vertical-align:middle; padding:.85rem .75rem;} .table-hover tbody tr:hover{background:rgba(63,107,255,.06); color:var(--text-1);} .table code{background:var(--navy-950); padding:.2rem .5rem; border-radius:6px; color:var(--blue-light); font-size:.82rem;} /* Tabela de logs — versão compacta */ #logs-table-wrap .table{font-size:.76rem;} #logs-table-wrap .table td, #logs-table-wrap .table th{padding:.4rem .55rem;} #logs-table-wrap .table code{font-size:.7rem; padding:.12rem .35rem;} .badge-ban{ display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .55rem; border-radius:7px; font-size:.68rem; font-weight:600; white-space:nowrap; } .btn-view-capture, .btn-generate-report{ background:rgba(63,107,255,.12); border:1px solid rgba(63,107,255,.3); color:var(--blue-light); width:28px; height:28px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; cursor:pointer; transition:.15s ease; } .btn-view-capture:hover{background:rgba(63,107,255,.22); color:#fff; transform:translateY(-1px);} .btn-generate-report{ background:rgba(255,185,90,.12); border-color:rgba(255,185,90,.3); color:var(--warning); } .btn-generate-report:hover{background:rgba(255,185,90,.22); color:#fff; transform:translateY(-1px);} .log-actions-cell{display:flex; align-items:center; justify-content:center; gap:.4rem;} .form-control, .form-select{ background:var(--navy-950); border:1px solid var(--line); color:var(--text-1); border-radius:10px; padding:.6rem .9rem; } .form-control::placeholder{color:var(--text-3);} .form-control:focus, .form-select:focus{ background:var(--navy-950); border-color:var(--blue); color:var(--text-1); box-shadow:0 0 0 3px var(--blue-dim); } label{color:var(--text-2); font-size:.86rem; font-weight:600;} .modal-content{ background:linear-gradient(165deg, var(--navy-800), var(--navy-900)); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); } .modal-header{background:linear-gradient(135deg, var(--blue), #2a4fd6)!important; color:#fff; border-radius:var(--radius) var(--radius) 0 0; border-bottom:none;} .modal-header .btn-close{filter:invert(1) grayscale(1) brightness(2);} .modal-footer{border-top:1px solid var(--line);} .badge-danger{background:var(--danger); color:#fff;} .badge-success{background:var(--success); color:#04241a;} .badge-info{background:var(--info); color:#04182f;} .permission-section{background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.4rem; height:100%;} .permission-section h6{color:var(--text-2); font-weight:700; margin-bottom:1rem; font-size:.9rem;} .identifier-list{display:flex; flex-direction:column; gap:.6rem;} .identifier-badge{ display:flex; align-items:center; justify-content:space-between; background:var(--navy-950); border:1px solid var(--line); border-radius:10px; padding:.6rem .9rem; } .identifier-badge code{background:transparent; color:var(--text-1); padding:0;} .remove-btn{background:transparent; border:none; color:var(--danger); opacity:.7; transition:opacity .2s ease;} .remove-btn:hover{opacity:1;} .info-icon{margin-left:.35rem; opacity:.6; cursor:help; font-size:.85rem; vertical-align:middle;} .info-icon:hover{opacity:1;} /* ========================================================================== Busca por Identificador (Painel — Logs) ========================================================================== */ .identifier-search-block{ background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.2rem 1.4rem; } #panel-identifier-search-result:empty{ margin-top:0 !important; } .identifier-result-found{ background:linear-gradient(165deg, var(--navy-800), var(--navy-850)); border:1px solid rgba(63,107,255,.3); border-radius:var(--radius-sm); padding:1.4rem 1.6rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; } .identifier-result-found .identifier-tag{ display:inline-flex; align-items:center; gap:.5rem; background:var(--blue-dim); color:var(--blue-light); font-weight:700; font-size:.85rem; padding:.35rem .8rem; border-radius:8px; margin-bottom:.6rem; } .identifier-result-found .identifier-fields{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:.9rem 1.5rem; flex:1 1 320px; } .identifier-result-found .identifier-fields > div{ min-width:0; } .identifier-result-found .identifier-fields div span{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin-bottom:2px; } .identifier-result-found .identifier-fields div strong{ display:block; font-size:.92rem; color:var(--text-1); font-weight:600; word-break:break-word; overflow-wrap:anywhere; } .identifier-result-notfound{ background:rgba(255,93,120,.08); border:1px solid rgba(255,93,120,.3); color:var(--danger); border-radius:var(--radius-sm); padding:1rem 1.4rem; font-size:.92rem; text-align:center; } /* Histórico de desbanimentos (skywhite_karmas) */ .karma-history-block{ flex:1 1 100%; background:var(--navy-950); border:1px solid var(--line); border-radius:10px; padding:.9rem 1.1rem; margin-top:.4rem; } .karma-history-header{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700; color:var(--text-1); margin-bottom:.6rem; } .karma-total-badge{ background:var(--blue-dim); color:var(--blue-light); font-size:.75rem; font-weight:700; padding:.15rem .55rem; border-radius:20px; } .karma-city-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; } .karma-city-chip{ background:var(--navy-900); border:1px solid var(--line); color:var(--text-2); font-size:.78rem; font-weight:600; padding:.3rem .7rem; border-radius:20px; } .karma-city-chip strong{ color:var(--blue-light); } .karma-last-info{ color:var(--text-3); font-size:.78rem; } /* ========================================================================== Gerenciar Proteções — Kanban ========================================================================== */ .config-toolbar{ background:var(--navy-800); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.5rem .6rem; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; } .config-toolbar .btn-sm{font-size:.75rem;} .config-toolbar .form-control-sm{font-size:.73rem;background:var(--navy-900);border-color:var(--line);color:var(--text-1);} .config-toolbar .form-control-sm:focus{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-dim);} .prot-dist-bar{ flex:1;height:6px;border-radius:3px; background:var(--navy-700);overflow:hidden;display:flex; max-width:200px; } .prot-dist-bar span{transition:flex .3s;} .prot-dist-text{font-size:.68rem;color:var(--text-3);white-space:nowrap;} .kanban-col{ background:linear-gradient(180deg, var(--navy-850), var(--navy-900)); border:1px solid var(--line); border-radius:var(--radius-sm); display:flex;flex-direction:column; min-height:200px; } .kanban-header{ padding:.45rem .65rem; border-bottom:1px solid var(--line); display:flex;align-items:center;gap:6px; position:sticky;top:0;z-index:2; background:linear-gradient(135deg, var(--navy-800), var(--navy-850)); border-radius:var(--radius-sm) var(--radius-sm) 0 0; overflow:hidden; } .kanban-header::before{ content:""; position:absolute;top:-30px;right:-30px; width:100px;height:100px; border-radius:50%; opacity:.15; pointer-events:none; } .kanban-col[data-action="ban"] .kanban-header::before{background:radial-gradient(circle,#dc3545,transparent 70%);} .kanban-col[data-action="kick"] .kanban-header::before{background:radial-gradient(circle,#fd7e14,transparent 70%);} .kanban-col[data-action="log"] .kanban-header::before{background:radial-gradient(circle,#0d6efd,transparent 70%);} .kanban-header i{font-size:.8rem;position:relative;z-index:1;} .kanban-header span{font-family:var(--font-display);font-weight:600;font-size:.78rem;position:relative;z-index:1;} .kanban-header .badge{font-size:.62rem;font-weight:600;margin-left:auto;position:relative;z-index:1;transition:transform .3s;} .kanban-header .badge.pulse{animation:badge-pulse .4s ease;} @keyframes badge-pulse{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}} .kanban-body{ padding:5px;flex:1;overflow-y:auto;max-height:420px; transition:background .2s; } .kanban-body::-webkit-scrollbar{width:4px;} .kanban-body::-webkit-scrollbar-track{background:transparent;} .kanban-body::-webkit-scrollbar-thumb{background:var(--navy-500);border-radius:4px;} .kanban-body.drag-over{background:rgba(63,107,255,.06);} .kanban-card{ background:var(--navy-800); border:1px solid var(--line); border-left:3px solid var(--text-muted); border-radius:6px; padding:5px 8px; margin-bottom:4px; cursor:grab; display:flex; align-items:center; gap:5px; user-select:none; animation:card-in .25s ease both; } @keyframes card-in{from{opacity:0;transform:translateY(6px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}} .kanban-card:hover{transform:translateX(3px);box-shadow:0 4px 14px rgba(0,0,0,.35);} .kanban-card.dragging{opacity:.3;} .kanban-card.inactive{ background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.05); opacity:.5; } .kanban-card .prot-toggle{width:1.4rem;height:.9rem;cursor:pointer;margin:0;flex-shrink:0;} .kanban-card .prot-toggle:checked{background-color:var(--blue);border-color:var(--blue);} .kanban-card .prot-toggle:not(:checked){background-color:var(--navy-600);border-color:var(--navy-500);} .kanban-card .prot-name{ font-size:.72rem;font-weight:500; color:var(--text-1); flex:1;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; display:flex;align-items:center;gap:5px; } .kanban-card .prot-name .prot-dot{ width:5px;height:5px;border-radius:50%;flex-shrink:0; transition:background .2s; } .kanban-card.active .prot-name .prot-dot{background:var(--blue-light);box-shadow:0 0 4px var(--blue-light);} .kanban-card.inactive .prot-name .prot-dot{background:var(--text-3);} /* Auto-save toast */ #save-toast{ position:fixed;bottom:24px;right:24px;z-index:9999; background:linear-gradient(135deg,var(--blue),#2a4fd6); color:#fff;padding:8px 16px;border-radius:var(--radius-sm); font-size:.78rem;font-weight:600;box-shadow:0 4px 20px rgba(63,107,255,.35); display:flex;align-items:center;gap:8px; opacity:0;transform:translateY(10px); transition:opacity .3s,transform .3s; pointer-events:none; } #save-toast.show{opacity:1;transform:translateY(0);} /* Stats line */ .prot-stats{font-size:.7rem;color:var(--text-3);white-space:nowrap;display:flex;align-items:center;gap:6px;} .prot-stats .stat-dot{width:5px;height:5px;border-radius:50%;display:inline-block;} .prot-stats .stat-dot.on{background:var(--blue-light);box-shadow:0 0 4px var(--blue-light);} .prot-stats .stat-dot.off{background:var(--text-3);} @media (max-width:767px){ .kanban-body{max-height:260px;} } /* ========================================================================== Player Info Card (busca em Gerenciar Permissões) ========================================================================== */ .player-info-detail { transition: max-height 0.25s ease, opacity 0.2s ease; } .player-info-detail code { color: var(--blue-light); background: rgba(63,107,255,0.08); padding: 1px 5px; border-radius: 3px; } /* ========================================================================== Responsivo ========================================================================== */ @media (max-width:991px){ .hero-section{padding-top:7rem;} .hero-logo{width:260px;} } @media (max-width:768px){ .section{padding:4rem 0;} .auth-glass-card{padding:2rem 1.5rem;} .stat-card{flex-direction:row;} } @media (max-width:576px){ .pi{padding:1.2rem .8rem 1rem; border-radius:20px;} .pi-card{padding:1.5rem 1rem;} .pi-price{font-size:2.2rem;} .pi-seg-btn{font-size:.65rem; padding:5px 10px; gap:4px;} .pi-seg-btn i{display:none;} .pi-feats-g{gap:.15rem .5rem;} .pi-feats-g span{font-size:.7rem;} } @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;} }