:root {
    --sidebar: #17151f;
    --bg: #f2f0f7;
    --card-bg: #ffffff;
    --border: #e6e3ee;
    --accent: #d4a94a;
    --accent-2: #e8c273;
    --accent-grad: linear-gradient(135deg, #d4a94a 0%, #e8c273 100%);
    --text: #1a1c2e;
    --muted: #6b7280;
    --radius: 14px;
    /* tokens só da tela de login/cadastro (fundo escuro) */
    --auth-bg: #08080c;
    --auth-card: #0d0d13;
    --auth-border: rgba(212,169,74,.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    font-size: 14px;
}
h1, h2, h3, .logo, .sidebar-brand { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 224px;
    flex-shrink: 0;
    background: var(--sidebar);
    color: #a9a9c0;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; color: #fff; padding: 0 8px 22px; }
.brand-badge {
    width: 28px; height: 28px; border-radius: 50%;
    flex-shrink: 0; object-fit: cover;
    box-shadow: 0 0 14px rgba(212,169,74,.45);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 9px;
    color: #8f8fa8; text-decoration: none; font-size: 13.5px; font-weight: 500;
    transition: background .18s ease, color .18s ease;
}
.nav-link i { width: 16px; text-align: center; font-size: 13px; }
.nav-link:hover { background: rgba(212,169,74,.1); color: #fff; }
.nav-link.active { background: var(--accent-grad); color: var(--sidebar); }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.nav-link.logout:hover { background: rgba(239,68,68,.15); color: #fca5a5; }

.main { flex: 1; min-width: 0; }
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 28px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
}
.page-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }

/* ---------- menu do usuário (dropdown) ---------- */
.user-menu { position: relative; }
.user-chip {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; font-weight: 600; color: var(--text);
    background: none; border: none; cursor: pointer;
    padding: 6px 10px 6px 6px; border-radius: 999px;
    transition: background .15s ease;
}
.user-chip:hover { background: #f4f2fa; }
.user-chip i.fa-chevron-down { font-size: 10px; color: var(--muted); transition: transform .15s ease; }
.user-menu.open .user-chip i.fa-chevron-down { transform: rotate(180deg); }
.avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-grad); color: var(--sidebar);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 12px; flex-shrink: 0;
}
.user-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(16,24,40,.18);
    min-width: 190px; padding: 6px;
    display: none; z-index: 30;
}
.user-menu.open .user-dropdown { display: block; }
.user-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 500;
}
.user-dropdown a i { width: 15px; color: var(--muted); font-size: 13px; }
.user-dropdown a:hover { background: #f4f2fa; }
.user-dropdown a.logout { color: #dc2626; }
.user-dropdown a.logout i { color: #dc2626; }
.user-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

/* ---------- sininho de notificações ---------- */
.notif-menu { position: relative; }
.notif-bell {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; border: none; background: none;
    color: var(--text); font-size: 16px; cursor: pointer; transition: background .15s ease;
}
.notif-bell:hover { background: #f4f2fa; }
.notif-badge {
    position: absolute; top: 2px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800;
    display: none; align-items: center; justify-content: center; line-height: 1;
}
.notif-badge.tem-novas { display: flex; }
.notif-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(16,24,40,.18);
    width: 320px; max-height: 380px; overflow-y: auto; padding: 6px;
    display: none; z-index: 30;
}
.notif-menu.open .notif-dropdown { display: block; }
.notif-dropdown-titulo { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.notif-item { display: block; position: relative; padding: 9px 28px 9px 10px; border-radius: 8px; }
.notif-item + .notif-item { border-top: 1px solid var(--border); }
.notif-item strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.notif-item span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.notif-item time { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.notif-item-excluir {
    position: absolute; top: 8px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
    border: none; background: none; color: var(--muted); font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.notif-item-excluir:hover { background: #fee2e2; color: #b91c1c; }
.notif-vazio { padding: 18px 10px; text-align: center; font-size: 13px; color: var(--muted); }

.content { max-width: 1000px; margin: 0 auto; padding: 26px 28px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: #fff; text-decoration: none; }
.logo-badge {
    width: 28px; height: 28px; border-radius: 50%;
    flex-shrink: 0; object-fit: cover;
    box-shadow: 0 0 14px rgba(212,169,74,.5);
}

/* ---------- auth (login/cadastro) ---------- */
.auth-page {
    max-width: none; margin: 0; padding: 0; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 20% 20%, rgba(212,169,74,.15), var(--auth-bg) 55%), var(--auth-bg);
}
.auth-page > .logo { position: fixed; top: 24px; left: 32px; }
.auth-box {
    width: 100%; max-width: 400px; margin: 24px;
    background: var(--auth-card);
    border: 1.5px solid var(--auth-border);
    padding: 34px 32px;
    border-radius: 18px;
    box-shadow: 0 0 50px rgba(212,169,74,.18), 0 30px 60px -20px rgba(0,0,0,.6);
    text-align: center;
}
.auth-icon {
    width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
    object-fit: cover; display: block;
    box-shadow: 0 0 22px rgba(212,169,74,.5);
}
.auth-box h1 { font-size: 19px; margin-bottom: 4px; color: #fff; }
.auth-box .muted { font-size: 13px; color: #9a9ab0; }
.auth-box form { display: flex; flex-direction: column; gap: 13px; margin-top: 20px; text-align: left; }
.auth-box label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: #b3b3c6; }
.auth-box input { background: #131319; border: 1.5px solid #24242e; color: #fff; }
.auth-box input::placeholder { color: #5c5c72; }
.auth-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(212,169,74,.18); }
.stacked-form { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; align-items: flex-start; }
.stacked-form .field-label, .stacked-form .form-row { width: 100%; align-self: stretch; }
.field-label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.form-row { display: flex; gap: 12px; }
.form-row label { flex: 1; min-width: 0; }
.switch-link { margin-top: 16px; font-size: 13px; color: #9a9ab0; }
.switch-link a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
.switch-link a:hover { text-decoration: underline; }

/* ---------- misc text ---------- */
.muted { color: var(--muted); }
.erro { color: #b91c1c; background: #fee2e2; padding: 9px 13px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ok { color: #065f46; background: #d1fae5; padding: 9px 13px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.auth-box .erro { color: #fca5a5; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); }
.auth-box .ok { color: #6ee7b7; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3); }

/* ---------- inputs & botões (fundo claro) ---------- */
input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%; min-width: 0;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-size: 13.5px; font-family: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    background: #fbfbfe; color: var(--text);
    resize: vertical;
}
input::placeholder, textarea::placeholder { color: #9ca3af; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212,169,74,.15); background: #fff; }

/* Campo rotulado genérico (label + input empilhados, com respiro entre
   campos) -- sem isso, um <div class="campo"> fora do .form-onboarding
   (ver pagamentos-agendamento.php) não tinha NENHUM espaçamento próprio,
   label e input ficavam colados um no outro e nos campos vizinhos. */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--text); }

/* ---------- formulário guiado (configurar-site.php) ---------- */
.form-onboarding { display: flex; flex-direction: column; gap: 18px; }
.form-onboarding .campo { display: flex; flex-direction: column; gap: 6px; }
.form-onboarding .campo > span { font-size: 13px; font-weight: 600; color: var(--text); }
.form-onboarding .campo small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.form-onboarding input[type="file"] {
    padding: 8px 10px; border: 1.5px dashed var(--border); border-radius: 9px;
    font-size: 12.5px; background: #fbfbfe; cursor: pointer;
}
/* Cores neutras (slate) nos campos do formulário guiado -- em vez do dourado
   usado no resto do portal, que aqui ficava pesado por causa da quantidade
   de campos na tela ao mesmo tempo. */
.form-onboarding input:focus, .form-onboarding textarea:focus {
    border-color: #475569; box-shadow: 0 0 0 3px rgba(71,85,105,.14);
}

/* ---------- assistente em etapas (wizard) ---------- */
.wizard-progress {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin-bottom: 26px; flex-wrap: wrap;
}
.wizard-step-dot {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    opacity: .45; transition: opacity .2s ease;
}
.wizard-step-dot.active, .wizard-step-dot.done { opacity: 1; }
.wizard-step-dot span {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--border); color: var(--muted); font-weight: 700; font-size: 13px;
}
.wizard-step-dot.active span { background: #334155; color: #fff; }
.wizard-step-dot.done span { background: #86efac; color: #14532d; }
.wizard-step-dot small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.wizard-step-line { width: 30px; height: 2px; background: var(--border); margin-bottom: 16px; }
.wizard-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }

.template-picker-lista {
    max-height: 320px; overflow-y: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px;
    border: 1.5px solid var(--border); border-radius: 10px; padding: 10px;
}
.template-picker-item {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--border);
    background: #fbfbfe; cursor: pointer; font-size: 12.5px; text-align: left;
    font-family: inherit; color: var(--text); transition: border-color .15s ease, background .15s ease;
}
.template-picker-item:hover { border-color: var(--accent); }
.template-picker-item.selecionado { border-color: var(--accent); background: #fef9ef; box-shadow: 0 0 0 2px rgba(212,169,74,.15); }
.template-picker-item i { color: var(--muted); flex-shrink: 0; }
.template-picker-item span { flex: 1; }

/* ---------- tela de acompanhamento (configurar-site.php) ---------- */
.status-tracker-panel { text-align: center; padding: 40px 32px; }
.status-header { margin-bottom: 34px; }

.status-eyebrow {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: #64748b; margin: 14px 0 8px;
}
.status-badge {
    width: 62px; height: 62px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #334155; font-size: 22px;
    border: 1.5px solid #cbd5e1;
    box-shadow: 0 0 0 6px rgba(51,65,85,.05), 0 8px 20px rgba(15,23,42,.08);
}
.status-badge-done { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: #fff; border-color: transparent; }
.status-header h2 {
    font-size: 20px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', inherit;
}

.tracker {
    display: flex; flex-direction: column; gap: 2px;
    max-width: 460px; margin: 0 auto; text-align: left;
}
.tracker-item { display: flex; gap: 16px; padding: 12px 6px; position: relative; }
.tracker-item::before {
    content: ''; position: absolute; left: 20px; top: 44px; bottom: -8px;
    width: 1.5px; background: var(--border);
}
.tracker-item:last-child::before { display: none; }
.tracker-item.done::before { background: var(--accent-2); }
.tracker-dot {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--muted); font-size: 14px; z-index: 1;
    border: 1.5px solid var(--border);
}
.tracker-item.done .tracker-dot { background: var(--accent-grad); color: #fff; border-color: transparent; }
.tracker-item.active .tracker-dot {
    background: #fff; color: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(212,169,74,.12);
}
.tracker-info { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; }
.tracker-info strong { font-size: 13.5px; letter-spacing: -.1px; }
.tracker-info span { font-size: 12px; line-height: 1.4; }
.tracker-item:not(.done):not(.active) .tracker-info strong { color: var(--muted); }

.status-note {
    display: flex; align-items: flex-start; gap: 12px;
    max-width: 460px; margin: 28px auto 0; padding: 14px 18px; border-radius: 10px;
    background: #faf8f3; border-left: 2.5px solid var(--accent);
    color: var(--text); font-size: 12.5px; text-align: left; line-height: 1.5;
}
.status-note i { font-size: 14px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }

.status-pronto { text-align: center; padding: 44px 32px; }
.status-pronto h2 {
    margin: 4px 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -.2px;
    font-family: 'Plus Jakarta Sans', inherit;
}

/* ---------- verificador de domínio ---------- */
.dominio-resultados { display: flex; flex-direction: column; gap: 6px; }
.dominio-linha {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 9px; border: 1.5px solid var(--border);
    font-size: 13px;
}
.dominio-nome { font-weight: 600; flex: 1; }
.dominio-status { font-size: 12px; font-weight: 600; }
.dominio-disponivel { border-color: #86efac; background: #f0fdf4; }
.dominio-disponivel .dominio-status { color: #15803d; }
.dominio-indisponivel { opacity: .6; }
.dominio-indisponivel .dominio-status { color: #b91c1c; }
.dominio-desconhecido .dominio-status { color: var(--muted); }

/* ---------- próximos passos (site pronto) ---------- */
.proximos-passos-header { text-align: center; margin: 32px 0 18px; }
.proximos-passos-header h3 { font-size: 17px; margin: 4px 0 6px; font-family: 'Plus Jakarta Sans', inherit; }
.proximos-passos-header p { font-size: 12.5px; }

.proximos-passos-grid {
    display: grid; grid-template-columns: 1fr; gap: 16px;
    align-items: start; max-width: 480px; margin: 0 auto;
}
.passo-card { display: flex; flex-direction: column; gap: 16px; }
.passo-card-header { display: flex; align-items: flex-start; gap: 12px; }
.passo-card-icone {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
.passo-card-header h4 {
    font-size: 14.5px; margin: 0 0 3px; font-weight: 700; letter-spacing: -.1px;
    font-family: 'Plus Jakarta Sans', inherit; color: var(--text);
}
.passo-card-header p { font-size: 12px; line-height: 1.4; }
.passo-card-corpo { border-top: 1px dashed var(--border); padding-top: 16px; }

/* cada card com uma cor de destaque própria, pra não parecerem repetidos */
.passo-card-dominio .passo-card-icone { background: linear-gradient(135deg,#3b82f6,#60a5fa); color: #fff; }
.passo-card-fotos .passo-card-icone { background: linear-gradient(135deg,#e879a8,#f0a8c8); color: #fff; }
.passo-card-icone-whats { background: linear-gradient(135deg,#25d366,#128c7e); color: #fff; }

.btn-whatsapp {
    display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 9px;
    background: linear-gradient(135deg,#25d366,#1fb655); color: #fff; font-weight: 700; font-size: 13.5px;
    text-decoration: none; border: none; cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.btn-whatsapp:hover { filter: brightness(0.96); transform: translateY(-1px); }
.btn-whatsapp i { font-size: 16px; }

.dominio-busca-linha { display: flex; gap: 8px; }
.dominio-busca-linha input { flex: 1; min-width: 0; }

.passo-confirmacao {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: 8px; background: #f0fdf4; color: #14532d;
    font-size: 12.5px; line-height: 1.4;
}
.passo-confirmacao i { margin-top: 1px; flex-shrink: 0; }
.passo-confirmacao-editavel { background: #f1f5f9; color: #334155; }
#contadorTroca { color: #334155; font-weight: 700; }


.btn-primary, .btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 13px;
    text-decoration: none; cursor: pointer; border: none;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 14px -6px rgba(212,169,74,.45); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(212,169,74,.6); filter: brightness(1.03); }
.btn-outline { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-small { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.btn-danger-outline { background: #fff; color: #dc2626; border: 1.5px solid #fecaca; }
.btn-danger-outline:hover { background: #fef2f2; }
.btn-outline.active { background: var(--accent-grad); color: #fff; border-color: transparent; }

/* ---------- popup: domínio definitivo pendente ---------- */
.popup-dominio {
    position: fixed; left: 20px; bottom: 20px; z-index: 200;
    display: flex; align-items: center;
    background: #17151f; color: #fff;
    padding: 14px 34px 14px 16px; border-radius: 14px; max-width: 340px;
    box-shadow: 0 16px 40px -10px rgba(0,0,0,.45), 0 0 0 1.5px rgba(212,169,74,.35);
    animation: popupDominioEntrar .4s ease, popupDominioPulsar 2.4s ease-in-out 1s infinite;
}
.popup-dominio:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -10px rgba(0,0,0,.5), 0 0 0 1.5px rgba(212,169,74,.55); }
.popup-dominio-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.popup-dominio-fechar {
    position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.08); color: #9a9ab0; font-size: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.popup-dominio-fechar:hover { background: rgba(220,38,38,.25); color: #fca5a5; }
.popup-dominio-icone {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent-grad); color: #17151f;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.popup-dominio-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.popup-dominio-texto strong { font-size: 13.5px; line-height: 1.3; }
.popup-dominio-texto span { font-size: 12px; color: #b3b3c6; line-height: 1.4; }
.popup-dominio-seta { flex-shrink: 0; color: var(--accent); font-size: 13px; }
@keyframes popupDominioEntrar {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes popupDominioPulsar {
    0%, 100% { box-shadow: 0 16px 40px -10px rgba(0,0,0,.45), 0 0 0 1.5px rgba(212,169,74,.35); }
    50% { box-shadow: 0 16px 40px -10px rgba(0,0,0,.45), 0 0 0 4px rgba(212,169,74,.35); }
}
@media (max-width: 600px) {
    .popup-dominio { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ---------- dashboard ---------- */
.welcome-banner {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 85% 0%, rgba(212,169,74,.35), transparent 60%), linear-gradient(135deg, #211a33, var(--sidebar));
    color: #fff;
    padding: 11px 18px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 13px;
}
.welcome-banner span { position: relative; opacity: .9; }
.welcome-banner strong { opacity: 1; }

.panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,.03);
}
.panel h3 { font-size: 14.5px; display: flex; align-items: center; gap: 7px; margin-bottom: 3px; color: var(--text); }
.panel h3 i { color: var(--muted); font-size: 13px; }
.panel > p.muted { margin: 3px 0 12px; font-size: 13px; }

/* ---------- domínio (cartão visual) ---------- */
.domain-card { display: flex; align-items: center; gap: 16px; }
.domain-icon {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -6px rgba(59,130,246,.5);
}
.domain-info { flex: 1; min-width: 0; }
.domain-name { display: block; font-size: 16.5px; font-weight: 800; color: var(--text); word-break: break-word; }
.domain-tags { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tag-ssl { background: #d1fae5; color: #065f46; }
.tag-dns { background: #dbeafe; color: #1e40af; }
.tag-off { background: #fee2e2; color: #991b1b; }
.domain-visit { flex-shrink: 0; }
.domain-since { display: block; margin-top: 7px; font-size: 11.5px; color: var(--muted); }

/* ---------- abas ---------- */
.tabs-nav { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab-btn {
    padding: 9px 14px; background: none; border: none; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    white-space: nowrap; transition: color .15s ease, border-color .15s ease;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.feature-list { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; }
.feature-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); }
.feature-list i { color: #2f9e63; margin-top: 3px; font-size: 12px; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.status-pill i { font-size: 6px; }
.status-on { background: #d1fae5; color: #065f46; }
.status-off { background: #fef3c7; color: #92400e; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 20px 0; }
.metric-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: 0 1px 2px rgba(16,24,40,.03);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.metric-card:hover { box-shadow: 0 18px 34px -16px rgba(16,24,40,.18); transform: translateY(-3px); border-color: #dfe2e8; }
.metric-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.metric-head span { font-size: 13px; color: var(--muted); font-weight: 600; }
.metric-icon {
    display: flex; align-items: center; justify-content: center;
    font-size: 60px; line-height: 1; flex-shrink: 0;
}
.metric-icon.ic-blue { color: #3b82f6; }
.metric-icon.ic-purple { color: #0891b2; }
.metric-icon.ic-green { color: #10b981; }
.metric-value { display: block; font-size: 26px; font-weight: 800; color: var(--text); }
.metric-value small { font-size: 13px; font-weight: 600; color: var(--muted); }
.metric-note { font-size: 12px; color: #b45309; margin-top: 8px; }
.capacity-bar { margin-top: 16px; height: 7px; border-radius: 999px; background: #eef0f2; overflow: hidden; }
.capacity-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent-grad); }
.capacity-bar span.fill-blue { background: linear-gradient(90deg,#3b82f6,#60a5fa); }
.capacity-bar span.fill-cyan { background: linear-gradient(90deg,#0891b2,#22d3ee); }

/* ---------- situação do plano / vencimento ---------- */
.plan-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.plan-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.plan-status-ativo { background: #d1fae5; color: #065f46; }
.plan-status-atencao { background: #fef3c7; color: #92400e; }
.plan-status-expirado { background: #fee2e2; color: #991b1b; }

/* ---------- card do plano contratado (aba Detalhes do plano) ---------- */
.plan-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-top: 4px solid var(--plan-cor);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(16,24,40,.04);
}
.plan-card-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.plan-card-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--plan-cor), var(--plan-cor-2));
    color: #fff; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -6px var(--plan-cor);
}
.plan-card-title { display: flex; flex-direction: column; flex: 1; min-width: 120px; }
.plan-card-name { font-size: 17px; font-weight: 800; color: var(--text); }
.plan-card-price { font-size: 13px; color: var(--muted); font-weight: 600; }
.plan-card-price small { font-weight: 500; }

.plan-card-features { grid-template-columns: repeat(2, 1fr); display: grid; gap: 10px 20px; }

.plan-card-footer {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--border);
}
.plan-card-stat { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.plan-card-stat strong { font-size: 13.5px; color: var(--text); }
.plan-card-upgrade { margin-left: auto; }

/* ---------- renovação automática ---------- */
.renovacao-card {
    background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius);
    padding: 18px 22px; margin-top: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.renovacao-card-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.renovacao-card-cartao {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
    background: var(--accent-grad); color: #17151f; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -6px rgba(212,169,74,.5);
}
.renovacao-card-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.renovacao-card-texto strong { font-size: 14px; color: var(--text); }
.renovacao-card-texto .muted { font-size: 12.5px; }
.renovacao-card-vencimento { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.renovacao-card-toggle-form { display: flex; align-items: center; gap: 10px; }
.renovacao-card-status { font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 68px; }
.renovacao-card-status-ativo { color: #15803d; }

.toggle-switch {
    position: relative; flex-shrink: 0; width: 44px; height: 25px; border-radius: 999px;
    background: #d9d9e3; border: none; cursor: pointer; padding: 0;
    transition: background .2s ease;
}
.toggle-switch-bola {
    position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease;
}
.toggle-switch-ativo { background: var(--accent-grad); }
.toggle-switch-ativo .toggle-switch-bola { transform: translateX(19px); }

.planos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.plano-escolha-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-top: 4px solid var(--plan-cor);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: 0 1px 3px rgba(16,24,40,.04);
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.plano-escolha-card-destaque { border-color: var(--plan-cor); box-shadow: 0 0 0 3px var(--plan-cor), 0 8px 24px -8px rgba(16,24,40,.18); }
.plano-escolha-card .plan-card-icon { margin-bottom: 4px; }
.plano-escolha-card .plan-card-name { font-size: 16px; }
.plano-escolha-preco { font-size: 28px; font-weight: 800; color: var(--text); }
.plano-escolha-preco small { font-size: 13px; font-weight: 500; color: var(--muted); }
.plano-escolha-preco-teste { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #92400e; background: #fef3c7; padding: 4px 10px; border-radius: 999px; margin-bottom: 6px; }
.plano-escolha-card .feature-list { margin: 6px 0 16px; flex: 1; }
.plano-escolha-card form { width: 100%; }

.invoice-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.invoice-info dt { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 3px; }
.invoice-info dd { font-size: 16px; font-weight: 800; margin: 0; color: var(--text); }
.invoice-badge { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.invoice-ok { background: #d1fae5; color: #065f46; }
.invoice-soon { background: #fef3c7; color: #92400e; }
.invoice-late { background: #fee2e2; color: #991b1b; }
.invoice-warning, .invoice-notice {
    margin-top: 12px; padding: 11px 14px; border-radius: 9px;
    font-size: 13px; display: flex; gap: 9px; align-items: flex-start;
}
.invoice-warning { background: #fee2e2; color: #991b1b; }
.invoice-notice { background: #fef3c7; color: #92400e; }

.details-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; margin-top: 12px; }
.details-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 3px; }
.details-grid dd { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 0; }

.chart-head { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.chart-head span { font-size: 12px; color: var(--muted); font-weight: 600; }
.chart-head .chart-avg { color: #3b82f6; font-weight: 700; }
.chart-svg { width: 100%; height: 90px; display: block; margin-top: 6px; }

/* ---------- explorador de arquivos (Gerenciamento) ---------- */

.fm-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-add-btn { cursor: pointer; }

.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.breadcrumb > i { font-size: 9px; color: var(--muted); }
.crumb { color: var(--muted); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.crumb i { color: #fbbf24; font-size: 13px; }
.crumb:hover { color: var(--accent); }
.crumb.current { color: var(--text); display: inline-flex; align-items: center; gap: 6px; }

#fmDropzone { border-radius: 12px; padding: 4px; transition: background .15s ease, box-shadow .15s ease; }
#fmDropzone.dragover { background: #f6f1fd; box-shadow: inset 0 0 0 2px var(--accent); }

.fm-section-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .03em;
    margin: 14px 4px 8px;
}
.fm-section-label:first-child { margin-top: 4px; }
.fm-section-label i { color: #fbbf24; font-size: 12px; }
.fm-count {
    background: #eef0f2; color: var(--muted);
    font-size: 10.5px; font-weight: 700;
    padding: 1px 7px; border-radius: 999px;
    text-transform: none; letter-spacing: 0;
}

/* grade de cards (pastas e arquivos) -- pastas ficam em "chips" horizontais
   compactos (só navegação, um clique abre), arquivos em lista de linhas
   largas com ações sempre visíveis (nada escondido atrás de hover, ícones
   minúsculos ou botões sobrepostos nos cantos -- ficava confuso demais). */
.fm-grid { display: flex; flex-wrap: wrap; gap: 10px; max-height: 340px; overflow-y: auto; padding: 4px; }
.fm-grid-folders { gap: 10px; }
.fm-grid-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; align-content: start; }

.fm-card { text-decoration: none; color: var(--text); cursor: pointer; }

.fm-card-folder {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 18px; border: 1.5px solid var(--border); border-radius: 12px; background: #fbfbfe;
    transition: background .15s ease, border-color .15s ease;
}
.fm-card-folder:hover { background: #f4f2fa; border-color: var(--accent-2); }
.fm-card-folder.dragover-target { background: #f1e9fd; border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.fm-card-folder .fm-card-icon { color: #fbbf24; font-size: 18px; }
.fm-card-folder .fm-card-name { font-size: 13.5px; font-weight: 700; }

.fm-card-file {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
    padding: 6px 4px; border: 1px solid var(--border); border-radius: 12px; background: #fbfbfe;
    text-align: center; transition: border-color .15s ease;
}
.fm-card-file:hover { border-color: var(--accent-2); }
.fm-card-file .fm-card-icon {
    width: 46px; height: 46px; border-radius: 10px; background: #eef0f2; color: var(--muted);
    font-size: 21px; flex-shrink: 0;
}
.fm-card-thumb { border-radius: 10px; overflow: hidden; background: #eef0f2; border: 1px solid var(--border); }
.fm-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fm-card-file .fm-card-name {
    width: 100%; font-size: 13.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fm-card-acoes { display: flex; align-items: center; justify-content: center; gap: 5px; }
.fm-card-file .fm-card-edit, .fm-card-file .fm-card-rename, .fm-card-file .fm-card-delete {
    position: static; flex-shrink: 0;
    width: 27px; height: 27px; border-radius: 8px;
    border: 1.5px solid transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; text-decoration: none; cursor: pointer;
    opacity: 1; box-shadow: none; transition: filter .15s ease, transform .15s ease;
}
.fm-card-file .fm-card-edit { background: #eaf2ff; color: #3b82f6; }
.fm-card-file .fm-card-rename { background: #f3edfe; color: #8b5cf6; }
.fm-card-file .fm-card-delete { background: #fdeeee; color: #ef4444; }
.fm-card-file .fm-card-edit:hover,
.fm-card-file .fm-card-rename:hover,
.fm-card-file .fm-card-delete:hover { filter: brightness(0.95); transform: translateY(-1px); }

.fm-empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--muted);
}
.fm-empty i { font-size: 32px; color: #d8dce3; margin-bottom: 10px; display: block; }
.fm-empty p { margin: 2px 0; font-size: 13.5px; }

.text-editor {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    background: #fafafc;
}
.text-editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13.5px; }
.text-editor textarea {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 13px;
    min-height: 220px;
}

.uptime-strip { display: flex; gap: 3px; margin-top: 8px; }
.uptime-bar { flex: 1; height: 28px; border-radius: 4px; cursor: default; }
.uptime-bom { background: #34d399; }
.uptime-alerta { background: #fbbf24; }
.uptime-ruim { background: #f87171; }
.uptime-sem-dado { background: #e5e7eb; }

.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; }
.badge-ativo { background: #d1fae5; color: #065f46; }
.badge-suspenso { background: #fef3c7; color: #92400e; }
.badge-cancelado { background: #fee2e2; color: #991b1b; }
.badge-sol-pendente { background: #fef3c7; color: #92400e; }
.badge-sol-em_andamento { background: #dbeafe; color: #1e40af; }
.badge-sol-concluido { background: #d1fae5; color: #065f46; }
.badge-sol-cancelado { background: #fee2e2; color: #991b1b; }

.tabela { width: 100%; border-collapse: collapse; margin-top: 6px; }
.tabela th, .tabela td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.tabela th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.tabela tbody tr:hover { background: #faf9fc; }

.portal-nav { display: none; }

@media (max-width: 860px) {
    .sidebar { display: none; }
    .content { padding: 18px; }
    .topbar { padding: 14px 18px; }
}
@media (max-width: 520px) {
    .form-row { flex-direction: column; }
    .details-grid { grid-template-columns: 1fr; }
    .domain-card { flex-direction: column; align-items: flex-start; }
    .invoice-card { flex-direction: column; align-items: flex-start; }
    .plan-status-row { flex-direction: column; align-items: flex-start; }
    .plan-card-features { grid-template-columns: 1fr; }
    .plan-card-upgrade { width: 100%; }
}