@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-main: #06050a;
    --bg-card: rgba(12, 10, 18, 0.72);
    --bg-card-solid: #0e0b16;
    --bg-card-hover: rgba(22, 18, 32, 0.88);
    --primary: #980406;
    --primary-hover: #b50508;
    --secondary: #9034e8;
    --secondary-hover: #a545ff;
    --text-main: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #6b6b80;
    --border: rgba(255, 255, 255, 0.07);
    --border-active: rgba(152, 4, 6, 0.45);
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --radius: 16px;
    --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 24px rgba(152, 4, 6, 0.22);
    --shadow-purple: 0 0 24px rgba(144, 52, 232, 0.2);
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    display: flex;
    min-height: 100vh;
    font-weight: 400;
    letter-spacing: -0.2px;
    overflow-x: hidden;
}

/* ── Aurora canvas background ──────────────────────────────────────────────── */
#auroraCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.52;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar {
    width: 80px;
    background: rgba(8, 6, 14, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(152, 4, 6, 0.12);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    position: fixed;
    height: 100vh;
    z-index: 200;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-x: hidden;
    white-space: nowrap;
}
.sidebar:hover { width: 280px; }

.sidebar-header {
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
    position: relative;
}
.sidebar-header::before {
    content: "";
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(152,4,6,0.35) 0%, rgba(144,52,232,0.18) 55%, transparent 78%);
    filter: blur(12px);
    z-index: -1;
}

/* Fechado: só o "A" (icon.png transparente), cabe no rail de 80px */
.brand-mark {
    width: 60px; height: 60px;
    display: block; object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(152,4,6,0.55)) drop-shadow(0 6px 14px rgba(0,0,0,0.4));
    transition: all 0.3s;
}
/* Aberto: logo completa (logo.png horizontal 765x183) */
.brand-logo {
    width: 180px; max-width: 100%; height: auto;
    display: block; margin: 4px auto 0;
    filter: drop-shadow(0 0 14px rgba(152,4,6,0.35));
    transition: all 0.3s; object-fit: contain;
}
.brand-wordmark { display: none; opacity: 0; transition: opacity 0.2s; }
.sidebar:hover .brand-wordmark { display: block; opacity: 1; }
.sidebar:hover .brand-mark { display: none; }

.nav-links { list-style:none; flex:1; padding:0 10px; overflow-y:auto; }
.nav-links::-webkit-scrollbar { width:0; }
.nav-links li { margin-bottom:4px; }

.nav-group-label {
    display: none;
    padding: 14px 14px 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
}
.sidebar:hover .nav-group-label { display: block; }

.nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 11px 13px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    border-radius: 14px;
    transition: var(--transition);
    font-weight: 500;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.025);
}
.nav-links a svg {
    min-width: 22px; width: 22px; height: 22px;
    display: block; flex-shrink: 0;
    opacity: 1 !important; visibility: visible !important;
    stroke-width: 2;
}
.nav-item-copy { display: none; }
.nav-item-copy strong { display:block; font-size:14px; font-weight:700; color:var(--text-main); line-height:1.1; }
.nav-item-copy small { display:block; margin-top:3px; font-size:11px; color:rgba(255,255,255,0.38); line-height:1.2; }

.sidebar:hover .nav-item-copy { display: block; }
.sidebar:hover .nav-links a { justify-content:flex-start; padding:12px 16px; }

.nav-links a:hover {
    color: #fff;
    border-color: rgba(152, 4, 6, 0.3);
    background: rgba(152, 4, 6, 0.08);
    box-shadow: 0 0 16px rgba(152,4,6,0.1);
}
.nav-links a.active {
    background: linear-gradient(110deg, rgba(152,4,6,0.22) 0%, rgba(144,52,232,0.1) 100%);
    border: 1px solid rgba(152,4,6,0.5);
    color: #ff3a3c;
    box-shadow: 0 0 20px rgba(152,4,6,0.18), inset 0 0 20px rgba(152,4,6,0.06);
}
.nav-links a.active .nav-item-copy strong { color: #ff3a3c; }

/* TikTok Downloader nav — same style as all other nav items */

/* ── Main Content ──────────────────────────────────────────────────────────── */
.main-content {
    flex: 1;
    margin-left: 80px;
    padding: 36px 40px;
    width: calc(100% - 80px);
    transition: margin-left 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
/* Exclui overlays fixos em tela cheia (modais, canvas de fundo, toasts) — eles
   precisam cobrir o viewport inteiro, não a coluna de conteúdo de 1200px. Sem
   essa exclusão, position:fixed + inset:0 + margin:auto encolhe a caixa para
   max-width:1200px centralizado, quebrando modais em telas largas (>1280px). */
.main-content > *:not(.gp-modal-overlay):not(#dashBg):not(.sales-toast-stack):not(#accToastStack) {
    width:100%; max-width:1200px; margin-left:auto; margin-right:auto;
}

/* ── Page Header ───────────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 36px;
}
.page-header h1 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.8px;
    background: linear-gradient(120deg, #fff 20%, rgba(255,255,255,0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.grid-3, .grid-4 { display:grid; gap:20px; margin-bottom:32px; }
.grid-3 { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }

.stat-card, .card-panel {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(152,4,6,0.4), rgba(144,52,232,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(152,4,6,0.3);
    box-shadow: var(--shadow-glow), var(--shadow-soft);
}
.stat-card h3 { font-size:13px; color:var(--text-secondary); font-weight:500; }
.stat-card .value { font-size:32px; font-weight:800; letter-spacing:-1px; }

.card-panel { padding:24px; overflow-x:auto; }

/* ── Tables ────────────────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; }
th, td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); }
th { color:var(--text-muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; }
tr:hover td { background:rgba(152,4,6,0.04); }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge { padding:5px 11px; border-radius:20px; font-size:11px; font-weight:700; }
.badge.alive  { background:rgba(16,185,129,0.1); color:var(--success); border:1px solid rgba(16,185,129,0.2); }
.badge.dead   { background:rgba(239,68,68,0.1); color:var(--danger); border:1px solid rgba(239,68,68,0.2); }
.badge.pending{ background:rgba(245,158,11,0.1); color:var(--warning); border:1px solid rgba(245,158,11,0.2); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */

/* PRIMARY GRADIENT — applied to all main action buttons */
.btn,
.btn-publish,
.modern-btn,
.btn-connect-tiktok,
.btn-ig,
.btn-select-all,
.source-btn.active,
button[type="submit"].login-submit,
.dl-btn.dl-btn-primary {
    padding: 11px 22px;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(152,4,6,0.35) !important;
    position: relative;
    overflow: hidden;
}
.btn::after,
.btn-publish::after,
.modern-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}
.btn:hover, .btn-publish:hover, .modern-btn:hover,
.btn-connect-tiktok:hover, .btn-ig:hover, .btn-select-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(152,4,6,0.45), 0 6px 22px rgba(144,52,232,0.25) !important;
    opacity: 1 !important;
}
.btn:hover::after, .btn-publish:hover::after, .modern-btn:hover::after { opacity: 1; }

/* EXCEPTIONS — keep their own style */
.filter-btn,
.btn-filter,
.btn.btn-filter,
.btn.filter-btn,
.btn.btn-clear,
.btn-clear,
a.btn-clear,
a.filter-btn,
button[id="stopOperationBtn"],
.btn.btn-secondary { all: unset; }

/* CRÍTICO: 'all: unset' acima remove o position:relative destes botões, então o
   pseudo-elemento .btn::after (position:absolute; inset:0) ESCAPA e se estica
   até o ancestral posicionado (o card inteiro, ~656x808px), virando uma camada
   invisível que rouba TODOS os cliques do card (lixeira apaga conta errada,
   clique no @ abre exclusão, Atualizar dispara Parar Operação). Neutralizamos: */
.filter-btn::after,
.btn-filter::after,
.btn.btn-filter::after,
.btn.filter-btn::after,
.btn.btn-clear::after,
.btn-clear::after,
a.btn-clear::after,
a.filter-btn::after,
button[id="stopOperationBtn"]::after,
.btn.btn-secondary::after {
    content: none !important;
    display: none !important;
}

.filter-btn, .btn-filter, .btn.btn-filter, .btn.filter-btn, a.filter-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px;
    padding: 11px 22px !important; border-radius: 10px !important; cursor: pointer !important;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    border: none !important;
    color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important; font-family: 'Inter', sans-serif !important;
    line-height: 1.2 !important;
    transition: 0.2s !important; text-decoration: none !important;
    box-shadow: 0 3px 12px rgba(152,4,6,0.35) !important;
    box-sizing: border-box !important;
}
.filter-btn:hover, .btn-filter:hover, .btn.btn-filter:hover, .btn.filter-btn:hover, a.filter-btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 18px rgba(152,4,6,0.45) !important;
}
.btn-clear, a.btn-clear, .btn.btn-clear {
    display: inline-flex !important; align-items: center !important; gap: 8px;
    padding: 11px 22px !important; border-radius: 10px !important; cursor: pointer !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 13px !important; font-weight: 600 !important; font-family: 'Inter', sans-serif !important;
    line-height: 1.2 !important;
    transition: 0.2s !important; text-decoration: none !important;
    box-sizing: border-box !important;
}
.btn-clear:hover, a.btn-clear:hover, .btn.btn-clear:hover {
    background: rgba(255,255,255,0.11) !important;
    border-color: rgba(152,4,6,0.3) !important;
    color: #fff !important;
}
#stopOperationBtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 12px; cursor: pointer;
    background: rgba(239,68,68,0.1) !important;
    border: 1px solid rgba(239,68,68,0.3) !important;
    color: var(--danger) !important;
    font-size: 14px; font-weight: 700; font-family: inherit;
    transition: 0.2s; box-shadow: none !important;
}
#stopOperationBtn:hover { background: rgba(239,68,68,0.18) !important; }

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary), #7020c8) !important;
    box-shadow: 0 4px 16px rgba(144,52,232,0.3) !important;
}
.btn-secondary:hover { box-shadow: 0 6px 22px rgba(144,52,232,0.4) !important; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-group label { display:block; margin-bottom:7px; color:var(--text-secondary); font-size:13px; font-weight:500; }
.form-control {
    width:100%; padding:11px 15px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    color:var(--text-main);
    border-radius:10px;
    transition:var(--transition);
    font-size:14px;
}
.form-control:focus { outline:none; border-color:rgba(152,4,6,0.5); box-shadow:0 0 0 3px rgba(152,4,6,0.12); }
.form-control::placeholder { color:rgba(255,255,255,0.25); }

/* ── Modals ────────────────────────────────────────────────────────────────── */
body.gp-modal-open { overflow:hidden; }
/* dashboard-premium.css dá `isolation:isolate` ao .main-content (pra conter as
   camadas de gradiente de fundo) — isso cria um novo contexto de empilhamento,
   então o z-index:9999 do modal só vale DENTRO do .main-content e nunca vence
   o .sidebar (z-index:1001) fora dele. No mobile o rail da sidebar fica sempre
   visível (74px fixos), então todo modal ficava com a borda esquerda enfiada
   atrás da sidebar — texto cortado no "L" de "Login" etc. Sobe o .main-content
   pra cima da sidebar só enquanto um modal estiver de fato aberto. */
body.gp-modal-open .main-content { z-index: 1002; }
.gp-modal-overlay {
    position:fixed; inset:0; width:100vw; height:100dvh;
    /* max-width/margin explícitos: blindagem contra qualquer regra de layout
       de página que force largura de coluna em filhos diretos de containers. */
    max-width:none; margin:0;
    background:rgba(0,0,0,0.75);
    z-index:9999; display:none; justify-content:center;
    /* flex-start + margin:auto no filho = centralização robusta que NÃO corta o
       topo quando o modal é mais alto que a viewport (bug clássico do
       align-items:center + overflow). */
    align-items:flex-start;
    padding:24px; overflow:auto; backdrop-filter:blur(4px);
}
.gp-modal-overlay.is-open { display:flex; }
.gp-modal {
    width:min(520px,100%);
    margin:auto;
    background:rgba(14,11,22,0.96);
    backdrop-filter:blur(24px);
    border:1px solid rgba(152,4,6,0.25);
    border-radius:20px;
    padding:32px;
    box-shadow:0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(152,4,6,0.08);
    max-height:none;
    overflow:visible;
}
.gp-modal-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:20px; gap:12px;
    position:sticky; top:0; z-index:2;
    background:rgba(14,11,22,0.96); padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.gp-modal-close {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:#fff; font-size:20px; cursor:pointer;
    width:34px; height:34px; border-radius:9px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:0.15s;
}
.gp-modal-close:hover { background:rgba(152,4,6,0.15); border-color:rgba(152,4,6,0.4); }

/* ── Mobile Bottom Nav ─────────────────────────────────────────────────────── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1001;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 6, 14, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.07);
}
.mobile-bottom-nav a {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}
.mobile-bottom-nav a svg {
    width: 21px; height: 21px;
    stroke-width: 2;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mobile-bottom-nav a::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 30px; height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #980406, #9034e8);
    transform: translateX(-50%) scaleX(0);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.mobile-bottom-nav a.active {
    color: #fff;
}
.mobile-bottom-nav a.active svg {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 8px rgba(152,4,6,0.65));
}
.mobile-bottom-nav a.active::before {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* ── Flatpickr ─────────────────────────────────────────────────────────────── */
.flatpickr-calendar {
    background:rgba(10,8,18,0.98) !important;
    border:1px solid rgba(152,4,6,0.2) !important;
    border-radius:16px !important;
    box-shadow:0 20px 60px rgba(0,0,0,0.7) !important;
    font-family:'Inter',sans-serif !important;
}
.flatpickr-month,.flatpickr-weekdays,.flatpickr-weekday { background:transparent !important; color:rgba(255,255,255,0.5) !important; }
.flatpickr-day { color:rgba(255,255,255,0.85) !important; border-radius:8px !important; }
.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover { background:rgba(152,4,6,0.15) !important; border-color:rgba(152,4,6,0.3) !important; }
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange { background:#980406 !important; border-color:#980406 !important; color:#fff !important; }
.flatpickr-day.inRange { background:rgba(152,4,6,0.12) !important; border-color:transparent !important; }
.flatpickr-current-month,.numInputWrapper,.flatpickr-monthDropdown-months { color:#fff !important; background:transparent !important; }
.flatpickr-prev-month,.flatpickr-next-month { fill:rgba(255,255,255,0.5) !important; }
.flatpickr-prev-month:hover svg,.flatpickr-next-month:hover svg { fill:#980406 !important; }


/* ── Mobile hamburger topbar (some no desktop) ───────────────────────────────── */
.mobile-topbar { display:none; }
.mobile-hamburger-btn { display:none; }
.mobile-sidebar-backdrop { display:none; }

/* Hover-expand da sidebar só em dispositivos com mouse de verdade — evita
   o rail "prender" aberto em toques/hover simulado de telas sensíveis ao toque. */
@media (hover: hover) and (pointer: fine) {
    .sidebar:hover { width: 280px; }
    .sidebar:hover .nav-item-copy { display: block; }
    .sidebar:hover .brand-wordmark { display: block; opacity: 1; }
    .sidebar:hover .brand-mark { display: none; }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html, body { overflow-x:hidden !important; max-width:100vw; }
    #auroraCanvas { display: none !important; }
    /* 2026-07-15: iOS Safari dá zoom automático ao focar um campo com
       font-size < 16px, mesmo com user-scalable=no no viewport — único jeito
       confiável de evitar é garantir 16px+ em TODO campo de formulário. */
    input, select, textarea, .form-control, .form-control-modern {
        font-size: 16px !important;
    }
    body {
        background:
            radial-gradient(circle at 18% 14%, rgba(152,4,6,0.22), transparent 34%),
            radial-gradient(circle at 82% 78%, rgba(144,52,232,0.18), transparent 38%),
            linear-gradient(180deg, #050409 0%, #090611 45%, #0d0817 100%) !important;
    }
    body::before,
    body::after {
        opacity: 1;
    }

    .mobile-topbar,
    .mobile-hamburger-btn,
    .mobile-sidebar-backdrop {
        display: none !important;
    }

    /* 2026-07-14: rail lateral substituído pelo menu inferior fixo no mobile
       (decisão explícita do usuário) — evita navegação duplicada na tela. */
    .sidebar {
        display: none !important;
    }
    .mobile-bottom-nav {
        display: flex !important;
    }

    .main-content {
        margin-left:0 !important;
        width:100% !important;
        padding:18px 12px calc(84px + env(safe-area-inset-bottom, 0px)) 16px !important;
        max-width:100vw !important; overflow-x:hidden !important;
        display:flex !important; flex-direction:column !important; align-items:center !important;
    }
    /* Mesma exclusão da regra desktop (linha ~184): overlays fixos em tela
       cheia (modais, canvas de fundo, toasts) não podem ser espremidos na
       largura de .main-content — eles precisam cobrir o viewport inteiro,
       inclusive por cima do rail lateral. Sem isso, o modal ficava deslocado
       e cortado no mobile (mesmo bug da versão desktop, aqui com !important). */
    .main-content > *:not(.gp-modal-overlay):not(#dashBg):not(.sales-toast-stack):not(#accToastStack) {
        max-width:100% !important; width:100%; box-sizing:border-box;
    }
    .gp-modal { width:100%; max-width:440px; }

    body { overflow-x:hidden !important; }

    /* Grids genéricos usados em várias páginas — sempre 1 coluna no mobile */
    .grid-3, .grid-4, .dashboard-grid, .stats-row, .status-card-grid { grid-template-columns:1fr !important; gap:12px !important; }
    .downloader-page { padding:12px !important; }
    .downloader-card { padding:18px !important; }
    .video-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
    .tk-header { flex-direction:column !important; align-items:flex-start !important; gap:12px !important; }
    .mobile-hidden { display:none !important; }
    .filter-form { flex-direction:column !important; }
    .gp-modal-overlay { padding:12px; }
    .gp-modal { padding:20px; border-radius:14px; }

    /* Cabeçalhos de página e cards centralizados, sem overflow lateral */
    .page-header { text-align:center; }

    /* Tabela → cards empilhados no mobile (sem precisar arrastar pros lados) */
    .table-responsive { overflow-x:hidden !important; }
    .premium-table { width:100%; }
    .premium-table thead { display:none; }
    .premium-table, .premium-table tbody, .premium-table tr, .premium-table td { display:block; width:100%; }
    .premium-table tr {
        margin-bottom:16px; border:1px solid rgba(255,255,255,0.08);
        border-radius:14px; padding:14px; background:rgba(255,255,255,0.02);
    }
    .premium-table tr:last-child { margin-bottom:0; }
    .premium-table td {
        padding:8px 2px !important; border-bottom:1px solid rgba(255,255,255,0.04) !important;
        font-size:13px;
    }
    .premium-table td:last-child { border-bottom:none !important; }

    /* Célula de status (select + aviso de erro) desalinhada do botão de
       excluir logo abaixo (que já é centralizado) — centraliza os dois pra
       ficarem visualmente organizados como um bloco só no card empilhado. */
    .acc-status-cell { text-align:center; }
    .acc-status-warning { margin-left:auto !important; margin-right:auto !important; text-align:center; }
}