/* STRTVISION-V2 — build concatenado. NÃO editar à mão. */

/* ============================================================================
   STRTVISION-V2  ·  01 · TOKENS (Design System)
   Light-first, marca âmbar StreetHosting. Derivado do CSS real do site.
   Todos os tokens são sobrescrevíveis pelo theme.yaml (head.tpl injeta :root).
   ========================================================================== */

:root {
  /* ---- Superfícies (light) ---- */
  --sv-bg:            #f8fafc;   /* fundo da página (slate-50, igual ao site) */
  --sv-surface:       #ffffff;   /* cards / painéis */
  --sv-surface-2:     #f5f5f5;   /* hover sutil / zebra */
  --sv-surface-3:     #eef1f5;
  --sv-glass:         rgba(255, 255, 255, 0.72);
  --sv-glass-border:  rgba(255, 255, 255, 0.65);
  --sv-glass-blur:    14px;

  /* Glows de fundo (radiais) — idênticos ao site principal */
  --sv-glow-1: rgba(245, 158, 11, 0.15);  /* #f59e0b26 */
  --sv-glow-2: rgba(217, 119, 6, 0.10);   /* #d977061a */
  --sv-glow-3: rgba(14, 165, 233, 0.05);  /* #0ea5e90d */

  /* ---- Texto ---- */
  --sv-text:     #0a0a0a;
  --sv-heading:  #171717;
  --sv-muted:    #737373;
  --sv-dim:      #a1a1a1;
  --sv-on-brand: #ffffff;

  /* ---- Bordas ---- */
  --sv-border:        #e5e5e5;
  --sv-border-strong: #d4d4d4;

  /* ---- Marca (âmbar StreetHosting) ---- */
  --sv-brand:      #f59e0b;   /* amber-500 — cor principal */
  --sv-brand-600:  #d97706;   /* amber-600 */
  --sv-brand-700:  #b45309;
  --sv-brand-300:  #fcd34d;
  --sv-brand-soft: #fff7ed;
  --sv-brand-tint: rgba(245, 158, 11, 0.12);
  --sv-grad-brand: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
  --sv-ring:       rgba(245, 158, 11, 0.45);
  --sv-glow-brand: 0 0 0 1px rgba(245, 158, 11, 0.28), 0 10px 28px -8px rgba(245, 158, 11, 0.40);

  /* ---- Ação primária (near-black, estilo Vercel) ---- */
  --sv-primary:       #171717;
  --sv-primary-hover: #000000;
  --sv-primary-fg:    #fafafa;

  /* ---- Acento secundário (azul-céu sutil) ---- */
  --sv-accent:      #0ea5e9;
  --sv-accent-tint: rgba(14, 165, 233, 0.12);

  /* ---- Status ---- */
  --sv-success:    #16a34a;  --sv-success-bg: rgba(22, 163, 74, 0.12);
  --sv-warning:    #d97706;  --sv-warning-bg: rgba(217, 119, 6, 0.12);
  --sv-danger:     #dc2626;  --sv-danger-bg:  rgba(220, 38, 38, 0.12);
  --sv-info:       #0ea5e9;  --sv-info-bg:    rgba(14, 165, 233, 0.12);
  --sv-neutral:    #737373;  --sv-neutral-bg: rgba(115, 115, 115, 0.12);

  /* ---- Tipografia ---- */
  --sv-font:      "Mozilla Text", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sv-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sv-fs-xs: 12px; --sv-fs-sm: 13px; --sv-fs: 14px; --sv-fs-md: 16px;
  --sv-fs-lg: 20px; --sv-fs-xl: 24px; --sv-fs-2xl: 32px; --sv-fs-3xl: 40px;
  --sv-lh: 1.55;

  /* ---- Raio ---- */
  --sv-radius-sm:   8px;
  --sv-radius:     12px;
  --sv-radius-lg:  16px;
  --sv-radius-xl:  22px;
  --sv-radius-full: 9999px;

  /* ---- Sombras ---- */
  --sv-shadow-sm:   0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --sv-shadow:      0 4px 14px -4px rgba(16, 24, 40, 0.10), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
  --sv-shadow-lg:   0 24px 48px -16px rgba(16, 24, 40, 0.20);
  --sv-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px -12px rgba(16, 24, 40, 0.16);

  /* ---- Espaçamento (escala 4px) ---- */
  --sv-1: 4px;  --sv-2: 8px;  --sv-3: 12px; --sv-4: 16px; --sv-5: 20px;
  --sv-6: 24px; --sv-8: 32px; --sv-10: 40px; --sv-12: 48px; --sv-16: 64px;
  --sv-density: 1;   /* densidade (multiplicador, config) */

  /* ---- Layout ---- */
  --sv-rail-w:        264px;
  --sv-rail-collapsed: 76px;
  --sv-topbar-h:      64px;
  --sv-content-max:   1320px;

  /* ---- Motion ---- */
  --sv-ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --sv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sv-dur-1: 120ms; --sv-dur-2: 180ms; --sv-dur-3: 240ms;

  --sv-z-rail: 1030;
  --sv-z-topbar: 1020;
  --sv-z-overlay: 1040;
}

/* Suporte opcional a dark (futuro) — o site possui .dark; deixamos o gancho. */
.sv-theme-dark {
  --sv-bg: #0a0a0a; --sv-surface: #141414; --sv-surface-2: #1c1c1c;
  --sv-glass: rgba(20, 20, 20, 0.6); --sv-glass-border: rgba(255,255,255,0.08);
  --sv-text: #fafafa; --sv-heading: #ffffff; --sv-muted: #a1a1a1; --sv-dim: #6b6b6b;
  --sv-border: #262626; --sv-border-strong: #333333;
  --sv-primary: #fafafa; --sv-primary-hover: #ffffff; --sv-primary-fg: #171717;
  --sv-shadow-card: 0 8px 24px -12px rgba(0,0,0,0.6);
}

/* ============================================================================
   STRTVISION-V2 · 02 · BASE (reset leve sobre Bootstrap + tipografia + fundo)
   ========================================================================== */

body.sv-body {
  font-family: var(--sv-font);
  font-size: var(--sv-fs);
  line-height: var(--sv-lh);
  color: var(--sv-text);
  background-color: var(--sv-bg);
  /* Glows radiais idênticos ao site principal */
  background-image:
    radial-gradient(at 0% 0%,   var(--sv-glow-1) 0, transparent 50%),
    radial-gradient(at 100% 0%, var(--sv-glow-2) 0, transparent 50%),
    radial-gradient(at 100% 100%, var(--sv-glow-3) 0, transparent 55%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sv-body h1, .sv-body h2, .sv-body h3,
.sv-body h4, .sv-body h5, .sv-body h6,
.sv-body .h1, .sv-body .h2, .sv-body .h3 {
  font-family: var(--sv-font);
  color: var(--sv-heading);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.25;
}

.sv-body a {
  color: var(--sv-brand-600);
  text-decoration: none;
  transition: color var(--sv-dur-1) var(--sv-ease);
}
.sv-body a:hover { color: var(--sv-brand-700); }

.sv-body hr { border-color: var(--sv-border); opacity: 1; }

.sv-body ::selection { background: var(--sv-brand-tint); color: var(--sv-heading); }

.sv-body strong, .sv-body b { font-weight: 600; }
.sv-body code, .sv-body kbd, .sv-body pre { font-family: var(--sv-font-mono); }

.sv-muted   { color: var(--sv-muted) !important; }
.sv-dim     { color: var(--sv-dim) !important; }
.sv-heading { color: var(--sv-heading) !important; }

/* Scrollbar (igual ao site: thumb âmbar claro) */
.sv-body { scrollbar-width: thin; scrollbar-color: #ff9f6d var(--sv-surface-2); }
.sv-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.sv-body ::-webkit-scrollbar-track { background: transparent; }
.sv-body ::-webkit-scrollbar-thumb {
  background: #ffb48a; border: 2px solid var(--sv-bg);
  border-radius: var(--sv-radius-full);
}
.sv-body ::-webkit-scrollbar-thumb:hover { background: #fa8c52; }

/* Foco acessível (ring âmbar) */
.sv-body :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sv-ring);
  border-radius: var(--sv-radius-sm);
}

/* Container fluido do tema */
.sv-container { width: 100%; max-width: var(--sv-content-max); margin: 0 auto;
  padding-left: var(--sv-6); padding-right: var(--sv-6); }

@media (max-width: 575.98px) {
  .sv-container { padding-left: var(--sv-4); padding-right: var(--sv-4); }
}

/* ============================================================================
   STRTVISION-V2 · 03 · WHMCS CHROME (estiliza o DOM nativo do twenty-one)
   header / topbar / navbar / breadcrumb / #main-body / footer
   ========================================================================== */

/* ---- Header geral ---- */
.sv-body #header.header { background: transparent; border: 0; }

/* Topbar (notificações + troca de conta) — #header p/ vencer o theme.css */
.sv-body #header .topbar {
  background: transparent !important; border-bottom: 1px solid var(--sv-border);
  font-size: var(--sv-fs-sm); color: var(--sv-muted);
}
.sv-body #header .topbar .btn { color: var(--sv-muted); border-radius: var(--sv-radius-sm); font-weight: 600; }
.sv-body #header .topbar .btn:hover { color: var(--sv-brand-600); background: var(--sv-surface-2); }
.sv-body #header .topbar .input-group-text { background: transparent; border: 0; color: var(--sv-muted); }
.sv-body #header .topbar a, .sv-body #header .topbar span { color: var(--sv-muted); }
.sv-body #header .btn-active-client { background: var(--sv-surface-2); border: 1px solid var(--sv-border) !important; color: var(--sv-heading) !important; border-radius: var(--sv-radius-sm); font-weight: 600; }
.sv-body #header .btn-active-client span { color: var(--sv-heading) !important; }
.sv-body #header .btn-active-client:hover { border-color: var(--sv-brand) !important; }
.sv-body #header .btn-active-client:hover span { color: var(--sv-brand-700) !important; }

/* Navbar (linha da marca) — transparente p/ mesclar com o fundo do site */
.sv-body .navbar.navbar-light {
  background: transparent !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0; position: static;
}
.sv-body .navbar-brand { color: var(--sv-heading); font-weight: 700; letter-spacing: -0.02em; }
.sv-body .navbar-brand .logo-img { max-height: 34px; width: auto; }
.sv-body .navbar .search .form-control {
  border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-border); background: var(--sv-surface); }
.sv-body .navbar .search .btn { background: var(--sv-surface); border: 1px solid var(--sv-border); color: var(--sv-muted); }
.sv-body .cart-btn { color: var(--sv-heading); }
.sv-body .cart-btn .badge { background: var(--sv-brand); color: #fff; }

/* Menu principal (main-navbar-wrapper / #nav) — transparente, só divisória inferior */
.sv-body .main-navbar-wrapper {
  background: transparent !important; border-bottom: 1px solid var(--sv-border);
}
/* Os <a> do menu são "#nav > li > a.pr-4" (sem .nav-link). Alvo correto: */
.sv-body #nav > li > a,
.sv-body .main-navbar-wrapper #nav li > a {
  color: var(--sv-text) !important; font-weight: 600; font-size: var(--sv-fs);
  padding: 0.7rem 0.9rem; border-radius: var(--sv-radius-sm);
  transition: color var(--sv-dur-1) var(--sv-ease), background var(--sv-dur-1) var(--sv-ease);
}
.sv-body #nav > li > a:hover,
.sv-body #nav > li > a:focus,
.sv-body .main-navbar-wrapper #nav li > a:hover {
  color: var(--sv-brand-600) !important; background: var(--sv-surface-2);
}
.sv-body #nav > li.active > a,
.sv-body #nav > li.current > a,
.sv-body #nav > li.open > a { color: var(--sv-brand-700) !important; }
/* seta do dropdown */
.sv-body #nav > li.dropdown > a.dropdown-toggle::after { color: var(--sv-muted); }

/* Remover "Domínios" do menu do header (a pedido) */
.sv-body #nav > li#Primary_Navbar-Domains { display: none !important; }

/* Dropdowns do menu */
.sv-body .dropdown-menu {
  border: 1px solid var(--sv-border); border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow-lg); background: var(--sv-surface); padding: var(--sv-2);
}
.sv-body .dropdown-menu .dropdown-item { border-radius: var(--sv-radius-sm); color: var(--sv-text); padding: 0.45rem 0.7rem; }
.sv-body .dropdown-menu .dropdown-item:hover { background: var(--sv-brand-tint); color: var(--sv-brand-700); }
.sv-body .dropdown-divider { border-color: var(--sv-border); }

/* Breadcrumb */
.sv-body .master-breadcrumb { background: transparent; padding-top: var(--sv-4); }
.sv-body .master-breadcrumb .breadcrumb { background: none; padding: 0; margin: 0; font-size: var(--sv-fs-sm); }
.sv-body .master-breadcrumb .breadcrumb-item, .sv-body .master-breadcrumb a { color: var(--sv-muted); }
.sv-body .master-breadcrumb .breadcrumb-item.active { color: var(--sv-heading); }

/* Corpo principal */
.sv-body #main-body { padding-top: var(--sv-6); padding-bottom: var(--sv-12); }

/* Footer */
.sv-body #footer.footer {
  background: var(--sv-surface); border-top: 1px solid var(--sv-border);
  margin-top: var(--sv-12); padding: var(--sv-8) 0; color: var(--sv-muted);
}
.sv-body #footer.footer .nav-link { color: var(--sv-muted); }
.sv-body #footer.footer .nav-link:hover { color: var(--sv-brand-600); }
.sv-body #footer.footer .copyright { color: var(--sv-dim); }
.sv-body #footer.footer .btn { color: var(--sv-muted); }

/* Notificações popover */
.sv-body .client-alerts { list-style: none; margin: 0; padding: 0; min-width: 260px; }
.sv-body .client-alerts li a { display: flex; gap: var(--sv-2); padding: var(--sv-2) var(--sv-3); border-radius: var(--sv-radius-sm); color: var(--sv-text); }
.sv-body .client-alerts li a:hover { background: var(--sv-surface-2); }

/* ============================================================================
   STRTVISION-V2 · 04 · SIDEBAR CONTEXTUAL (DOM nativo .sidebar / .card-sidebar)
   ========================================================================== */

.sv-body .sidebar .card, .sv-body .card-sidebar {
  border: 1px solid var(--sv-border); border-radius: var(--sv-radius-lg);
  box-shadow: var(--sv-shadow-sm); background: var(--sv-surface); overflow: hidden;
}
.sv-body .card-sidebar .card-header {
  background: transparent; border-bottom: 1px solid var(--sv-border); padding: var(--sv-3) var(--sv-4);
}
.sv-body .card-sidebar .card-title {
  font-size: var(--sv-fs); font-weight: 600; color: var(--sv-heading); margin: 0;
  display: flex; align-items: center; gap: var(--sv-2);
}
.sv-body .card-sidebar .card-title i { color: var(--sv-brand-600); }
.sv-body .card-minimise { color: var(--sv-dim); font-size: 12px; }

/* Itens do menu lateral */
.sv-body .sidebar .list-group-item, .sv-body .card-sidebar .list-group-item {
  background: transparent; border: 0; border-bottom: 1px solid var(--sv-border);
  color: var(--sv-text); padding: 0; transition: background var(--sv-dur-1) var(--sv-ease);
}
.sv-body .card-sidebar .list-group-item:last-child { border-bottom: 0; }
.sv-body .sidebar-menu-item-wrapper {
  display: flex; align-items: center; gap: var(--sv-3);
  padding: 0.6rem var(--sv-4); width: 100%;
}
.sv-body .sidebar-menu-item-icon-wrapper, .sv-body .sidebar-menu-item-icon {
  color: var(--sv-muted); width: 20px; text-align: center; flex: 0 0 20px;
  transition: color var(--sv-dur-1) var(--sv-ease);
}
.sv-body .sidebar-menu-item-label { flex: 1 1 auto; }
.sv-body .sidebar-menu-item-badge .badge { background: var(--sv-brand-tint); color: var(--sv-brand-700); }

.sv-body .sidebar .list-group-item-action:hover,
.sv-body .card-sidebar .list-group-item-action:hover { background: var(--sv-surface-2); color: var(--sv-heading); }
.sv-body .card-sidebar .list-group-item.active {
  background: var(--sv-brand-tint); border-color: transparent; color: var(--sv-brand-700);
}
.sv-body .card-sidebar .list-group-item.active .sidebar-menu-item-icon,
.sv-body .card-sidebar .list-group-item.active .sidebar-menu-item-label { color: var(--sv-brand-700); }
.sv-body .card-sidebar .list-group-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--sv-grad-brand); border-radius: 0 var(--sv-radius-full) var(--sv-radius-full) 0;
}
.sv-body .card-sidebar .list-group-item { position: relative; }

/* ============================================================================
   STRTVISION-V2 · 05 · COMPONENTS (botões, badges, alerts, tabs, modal...)
   Sobrescreve componentes Bootstrap mantendo as classes do WHMCS.
   ========================================================================== */

/* ---------- Botões ---------- */
.sv-body .btn {
  border-radius: var(--sv-radius-sm);
  font-weight: 600; font-size: var(--sv-fs);
  padding: 0.5rem 1rem; line-height: 1.2;
  border: 1px solid transparent;
  transition: all var(--sv-dur-2) var(--sv-ease);
}
.sv-body .btn:focus { box-shadow: 0 0 0 3px var(--sv-ring); }

.sv-body .btn-primary {
  background: var(--sv-primary); border-color: var(--sv-primary); color: var(--sv-primary-fg);
}
.sv-body .btn-primary:hover { background: var(--sv-primary-hover); border-color: var(--sv-primary-hover);
  transform: translateY(-1px); box-shadow: var(--sv-shadow); }

/* Botão de marca (CTA âmbar) */
.sv-body .btn-brand, .sv-body .btn-success.btn-brand {
  background: var(--sv-grad-brand); border: none; color: #fff;
}
.sv-body .btn-brand:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--sv-glow-brand); }

.sv-body .btn-default, .sv-body .btn-secondary {
  background: var(--sv-surface); border-color: var(--sv-border); color: var(--sv-heading);
}
.sv-body .btn-default:hover, .sv-body .btn-secondary:hover {
  background: var(--sv-surface-2); border-color: var(--sv-border-strong); color: var(--sv-heading); }

.sv-body .btn-outline-primary {
  background: transparent; border-color: var(--sv-border-strong); color: var(--sv-heading); }
.sv-body .btn-outline-primary:hover { background: var(--sv-brand-tint); border-color: var(--sv-brand); color: var(--sv-brand-700); }

.sv-body .btn-success { background: var(--sv-success); border-color: var(--sv-success); color: #fff; }
.sv-body .btn-danger  { background: var(--sv-danger);  border-color: var(--sv-danger);  color: #fff; }
.sv-body .btn-info    { background: var(--sv-info);    border-color: var(--sv-info);    color: #fff; }
.sv-body .btn-link    { color: var(--sv-brand-600); }

.sv-body .btn-xs { padding: 0.2rem 0.6rem; font-size: var(--sv-fs-xs); border-radius: 6px; }
.sv-body .btn-sm { padding: 0.35rem 0.75rem; font-size: var(--sv-fs-sm); }
.sv-body .btn-lg { padding: 0.7rem 1.4rem; font-size: var(--sv-fs-md); }
.sv-body .btn-block { width: 100%; }

/* Ghost / chip de ação rápida */
.sv-chip {
  display: inline-flex; align-items: center; gap: var(--sv-2);
  padding: 0.45rem 0.85rem; border-radius: var(--sv-radius-full);
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  color: var(--sv-heading); font-size: var(--sv-fs-sm); font-weight: 600;
  transition: all var(--sv-dur-2) var(--sv-ease);
}
.sv-chip:hover { background: var(--sv-brand-tint); border-color: var(--sv-brand); color: var(--sv-brand-700); transform: translateY(-1px); }
.sv-chip i { color: var(--sv-brand-600); }

/* ---------- Status badges modernos (dot + label) ---------- */
.sv-body .label.status, .sv-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--sv-radius-full);
  font-size: var(--sv-fs-xs); font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; white-space: nowrap;
}
.sv-status::before, .sv-body .label.status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.sv-status--success, .sv-body .status-active, .sv-body .status-paid, .sv-body .status-completed {
  color: var(--sv-success); background: var(--sv-success-bg); }
.sv-status--warning, .sv-body .status-pending, .sv-body .status-unpaid, .sv-body .status-overdue {
  color: var(--sv-warning); background: var(--sv-warning-bg); }
.sv-status--danger, .sv-body .status-terminated, .sv-body .status-cancelled, .sv-body .status-fraud, .sv-body .status-suspended {
  color: var(--sv-danger); background: var(--sv-danger-bg); }
.sv-status--info, .sv-body .status-open, .sv-body .status-answered {
  color: var(--sv-info); background: var(--sv-info-bg); }
.sv-status--neutral, .sv-body .status-closed {
  color: var(--sv-neutral); background: var(--sv-neutral-bg); }

/* Badge genérico */
.sv-body .badge {
  font-weight: 600; border-radius: var(--sv-radius-full); padding: 0.3em 0.6em; font-size: 11px;
}
.sv-body .badge-info { background: var(--sv-brand); color: #fff; }

/* Labels de status do WHMCS (cor vem inline: tickets Aberto/Fechado/Respondido, etc.)
   Vira uma pílula moderna com ponto, mantendo a cor por status definida no admin. */
.sv-body .label[style*="background"] {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 9px; border-radius: var(--sv-radius-full);
  font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .01em;
  color: #fff !important; vertical-align: middle; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.sv-body .label[style*="background"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; opacity: .9; flex: 0 0 auto;
}

/* ---------- Alerts / flash ---------- */
.sv-body .alert {
  border-radius: var(--sv-radius); border: 1px solid var(--sv-border);
  background: var(--sv-surface); color: var(--sv-text); box-shadow: var(--sv-shadow-sm);
  padding: var(--sv-4); position: relative; padding-left: calc(var(--sv-4) + 4px);
}
.sv-body .alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: var(--sv-radius) 0 0 var(--sv-radius); background: var(--sv-muted); }
.sv-body .alert-success { background: var(--sv-success-bg); border-color: transparent; }
.sv-body .alert-success::before { background: var(--sv-success); }
.sv-body .alert-warning { background: var(--sv-warning-bg); border-color: transparent; }
.sv-body .alert-warning::before { background: var(--sv-warning); }
.sv-body .alert-danger  { background: var(--sv-danger-bg); border-color: transparent; }
.sv-body .alert-danger::before  { background: var(--sv-danger); }
.sv-body .alert-info    { background: var(--sv-info-bg); border-color: transparent; }
.sv-body .alert-info::before    { background: var(--sv-info); }

/* ---------- Tabs ---------- */
.sv-body .nav-tabs { border-bottom: 1px solid var(--sv-border); gap: var(--sv-1); }
.sv-body .nav-tabs .nav-link {
  border: none; border-radius: 0; color: var(--sv-muted); font-weight: 600;
  padding: 0.6rem 0.9rem; border-bottom: 2px solid transparent;
}
.sv-body .nav-tabs .nav-link:hover { color: var(--sv-heading); border-bottom-color: var(--sv-border-strong); }
.sv-body .nav-tabs .nav-link.active {
  color: var(--sv-brand-700); background: none; border-bottom-color: var(--sv-brand); }

/* Pills */
.sv-body .nav-pills .nav-link { border-radius: var(--sv-radius-sm); color: var(--sv-muted); font-weight: 600; }
.sv-body .nav-pills .nav-link.active { background: var(--sv-brand-tint); color: var(--sv-brand-700); }

/* ---------- Modal ---------- */
.sv-body .modal-content {
  border: 1px solid var(--sv-border); border-radius: var(--sv-radius-lg);
  box-shadow: var(--sv-shadow-lg); background: var(--sv-surface);
}
.sv-body .modal-header, .sv-body .modal-footer { border-color: var(--sv-border); }
.sv-body .modal-title { color: var(--sv-heading); font-weight: 600; }

/* ---------- Tooltip / popover ---------- */
.sv-body .tooltip-inner {
  background: var(--sv-primary); color: var(--sv-primary-fg);
  border-radius: var(--sv-radius-sm); font-size: var(--sv-fs-sm); padding: 6px 10px; }
.sv-body .popover { border: 1px solid var(--sv-border); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow-lg); }

/* ---------- Progress / usage bar ---------- */
.sv-progress { height: 8px; border-radius: var(--sv-radius-full); background: var(--sv-surface-2); overflow: hidden; }
.sv-progress__bar { height: 100%; border-radius: inherit; background: var(--sv-grad-brand);
  transition: width var(--sv-dur-3) var(--sv-ease); }
.sv-progress__bar--ok   { background: var(--sv-success); }
.sv-progress__bar--warn { background: var(--sv-warning); }
.sv-progress__bar--crit { background: var(--sv-danger); }

/* ---------- Divider ---------- */
.sv-divider { height: 1px; background: var(--sv-border); border: 0; margin: var(--sv-5) 0; }

/* ============================================================================
   STRTVISION-V2 · 06 · CARDS (glass leve, service cards, stat tiles)
   ========================================================================== */

/* Card base (sobre .card do Bootstrap/WHMCS) */
.sv-body .card, .sv-card {
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg);
  box-shadow: var(--sv-shadow-sm);
  overflow: hidden;
}
.sv-body .card .card-header, .sv-card__header {
  background: transparent; border-bottom: 1px solid var(--sv-border);
  padding: var(--sv-4) var(--sv-5); font-weight: 600;
}
.sv-body .card .card-title { font-size: var(--sv-fs-md); color: var(--sv-heading); margin: 0; }
.sv-body .card .card-body, .sv-card__body { padding: var(--sv-5); }
.sv-body .card .card-footer, .sv-card__footer {
  background: transparent; border-top: 1px solid var(--sv-border); padding: var(--sv-3) var(--sv-5); }

/* Glassmorphism leve (opcional, ligado por config) */
.sv-glass-card {
  background: var(--sv-glass);
  -webkit-backdrop-filter: blur(var(--sv-glass-blur));
  backdrop-filter: blur(var(--sv-glass-blur));
  border: 1px solid var(--sv-glass-border);
  border-radius: var(--sv-radius-lg);
  box-shadow: var(--sv-shadow-card);
}
html[data-low-perf] .sv-glass-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #ffffffeb; }

/* Hover lift suave */
.sv-hoverable { transition: transform var(--sv-dur-2) var(--sv-ease), box-shadow var(--sv-dur-2) var(--sv-ease), border-color var(--sv-dur-2) var(--sv-ease); }
.sv-hoverable:hover { transform: translateY(-3px); box-shadow: var(--sv-shadow-lg); border-color: var(--sv-border-strong); }

/* ---------- Stat tiles (dashboard) ---------- */
.sv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sv-4); }
@media (max-width: 1199.98px) { .sv-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .sv-stats { grid-template-columns: 1fr; } }

.sv-stat {
  position: relative; display: block; padding: var(--sv-5);
  border-radius: var(--sv-radius-lg); background: var(--sv-surface);
  border: 1px solid var(--sv-border); box-shadow: var(--sv-shadow-sm);
  color: inherit; overflow: hidden;
  transition: transform var(--sv-dur-2) var(--sv-ease), box-shadow var(--sv-dur-2) var(--sv-ease), border-color var(--sv-dur-2) var(--sv-ease);
}
.sv-stat:hover { transform: translateY(-3px); box-shadow: var(--sv-shadow-lg); border-color: var(--sv-brand); color: inherit; text-decoration: none; }
.sv-stat::after { /* glow âmbar sutil no canto */
  content: ""; position: absolute; top: -40%; right: -20%; width: 160px; height: 160px;
  background: radial-gradient(circle, var(--sv-glow-1) 0, transparent 70%); pointer-events: none; }
.sv-stat__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sv-3); }
.sv-stat__icon {
  width: 40px; height: 40px; border-radius: var(--sv-radius); display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px;
  background: var(--sv-brand-tint); color: var(--sv-brand-600); }
.sv-stat__label { font-size: var(--sv-fs-sm); color: var(--sv-muted); font-weight: 500; }
.sv-stat__value { font-size: var(--sv-fs-2xl); font-weight: 700; color: var(--sv-heading); letter-spacing: -0.02em; line-height: 1.1; }
.sv-stat__meta { font-size: var(--sv-fs-xs); color: var(--sv-muted); margin-top: 4px; }
.sv-stat__delta--up { color: var(--sv-success); }
.sv-stat__delta--down { color: var(--sv-danger); }

/* Variações por tipo (cor do ícone) */
.sv-stat--services .sv-stat__icon { background: var(--sv-brand-tint); color: var(--sv-brand-600); }
.sv-stat--invoices .sv-stat__icon { background: var(--sv-warning-bg); color: var(--sv-warning); }
.sv-stat--tickets  .sv-stat__icon { background: var(--sv-info-bg); color: var(--sv-info); }
.sv-stat--balance  .sv-stat__icon { background: var(--sv-success-bg); color: var(--sv-success); }

/* ---------- Service cards (VPS / Minecraft / Dedicado) ---------- */
.sv-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sv-4); }

.sv-service {
  display: flex; flex-direction: column;
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-sm); overflow: hidden;
  transition: transform var(--sv-dur-2) var(--sv-ease), box-shadow var(--sv-dur-2) var(--sv-ease), border-color var(--sv-dur-2) var(--sv-ease);
}
.sv-service:hover { transform: translateY(-3px); box-shadow: var(--sv-shadow-lg); border-color: var(--sv-brand); }
.sv-service__top {
  display: flex; align-items: flex-start; gap: var(--sv-3);
  padding: var(--sv-5); border-bottom: 1px solid var(--sv-border); position: relative;
}
.sv-service__type-icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: var(--sv-radius);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--sv-brand-tint); color: var(--sv-brand-600);
}
.sv-service--vps  .sv-service__type-icon { background: var(--sv-accent-tint); color: var(--sv-accent); }
.sv-service--mc   .sv-service__type-icon { background: var(--sv-success-bg); color: var(--sv-success); }
.sv-service--dedi .sv-service__type-icon { background: var(--sv-warning-bg); color: var(--sv-warning); }
.sv-service__title { font-size: var(--sv-fs-md); font-weight: 600; color: var(--sv-heading); margin: 0; }
.sv-service__domain { font-size: var(--sv-fs-sm); color: var(--sv-muted); word-break: break-all; }
.sv-service__body { padding: var(--sv-4) var(--sv-5); display: flex; flex-direction: column; gap: var(--sv-3); flex: 1 1 auto; }
.sv-service__row { display: flex; align-items: center; justify-content: space-between; font-size: var(--sv-fs-sm); }
.sv-service__row .sv-k { color: var(--sv-muted); }
.sv-service__row .sv-v { color: var(--sv-heading); font-weight: 600; }
.sv-service__price { font-size: var(--sv-fs-lg); font-weight: 700; color: var(--sv-heading); }
.sv-service__price small { font-size: var(--sv-fs-sm); font-weight: 500; color: var(--sv-muted); }
.sv-service__footer { padding: var(--sv-4) var(--sv-5); border-top: 1px solid var(--sv-border); }

/* Specs (chips) para VPS / dedicado */
.sv-specs { display: flex; flex-wrap: wrap; gap: var(--sv-2); }
.sv-spec {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--sv-radius-sm);
  background: var(--sv-surface-2); border: 1px solid var(--sv-border);
  font-size: var(--sv-fs-xs); color: var(--sv-heading); font-weight: 600;
}
.sv-spec i { color: var(--sv-brand-600); }

/* ---------- Lista de Serviços (página Serviços, formato lista) ---------- */
.sv-svc-list { background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-sm); overflow: hidden; }
.sv-svc-row {
  display: flex; align-items: center; gap: var(--sv-4);
  padding: var(--sv-4) var(--sv-5); border-bottom: 1px solid var(--sv-border);
  color: inherit; transition: background var(--sv-dur-1) var(--sv-ease);
}
.sv-svc-row:last-child { border-bottom: 0; }
.sv-svc-row:hover { background: var(--sv-surface-2); color: inherit; text-decoration: none; }
.sv-svc-row__ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--sv-radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sv-brand-tint); color: var(--sv-brand-600); font-size: 18px; }
.sv-svc-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sv-svc-row__title { font-weight: 600; color: var(--sv-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-svc-row__sub { font-size: var(--sv-fs-sm); color: var(--sv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-svc-row__meta { flex: 0 0 auto; text-align: right; min-width: 90px; display: flex; flex-direction: column; }
.sv-svc-row__price { font-weight: 700; color: var(--sv-heading); }
.sv-svc-row__cycle { font-size: var(--sv-fs-xs); color: var(--sv-muted); }
.sv-svc-row__due { flex: 0 0 auto; text-align: right; min-width: 110px; display: flex; flex-direction: column; }
.sv-svc-row__due-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--sv-dim); }
.sv-svc-row__due-val { font-size: var(--sv-fs-sm); color: var(--sv-heading); font-weight: 600; }
.sv-svc-row__status { flex: 0 0 auto; }
.sv-svc-row__chev { flex: 0 0 auto; color: var(--sv-dim); }
@media (max-width: 767.98px) {
  .sv-svc-row { flex-wrap: wrap; gap: var(--sv-2) var(--sv-3); }
  .sv-svc-row__meta, .sv-svc-row__due { text-align: left; min-width: 0; flex-direction: row; gap: 6px; align-items: baseline; }
  .sv-svc-row__chev { display: none; }
  .sv-svc-row__main { flex: 1 1 100%; }
}

/* Donut SVG (status) */
.sv-donut { width: 56px; height: 56px; }
.sv-donut circle { fill: none; stroke-width: 6; }
.sv-donut .sv-donut__track { stroke: var(--sv-surface-2); }
.sv-donut .sv-donut__val { stroke: var(--sv-brand); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }

/* ============================================================================
   STRTVISION-V2 · 07 · DASHBOARD (widgets, listas, ações rápidas)
   ========================================================================== */

/* Dashboard em largura total (sem sidebar contextual ERP na home) */
.sv-page-clientareahome #main-body .row > .col-lg-4,
.sv-page-clientareahome #main-body .row > [class*="col-"].col-xl-3 {
  display: none !important;
}
.sv-page-clientareahome #main-body .row > .primary-content {
  flex: 0 0 100% !important; max-width: 100% !important;
}

.sv-dash { display: flex; flex-direction: column; gap: var(--sv-6); }

/* Saudação + ações rápidas */
.sv-dash__hello { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-4); flex-wrap: wrap; }
.sv-dash__hello h1 { font-size: var(--sv-fs-xl); margin: 0; }
.sv-dash__hello .sv-page-sub { color: var(--sv-muted); font-size: var(--sv-fs-sm); }
.sv-quick-actions { display: flex; flex-wrap: wrap; gap: var(--sv-2); }

/* Grid de widgets 2 colunas */
.sv-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sv-6); align-items: start; }
@media (max-width: 991.98px) { .sv-widgets { grid-template-columns: 1fr; } }
.sv-widget--full { grid-column: 1 / -1; }

.sv-widget { background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-sm); overflow: hidden; }
.sv-widget__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--sv-4) var(--sv-5); border-bottom: 1px solid var(--sv-border); }
.sv-widget__title { font-size: var(--sv-fs); font-weight: 600; color: var(--sv-heading);
  display: flex; align-items: center; gap: var(--sv-2); }
.sv-widget__title i { color: var(--sv-brand-600); }
.sv-widget__action { font-size: var(--sv-fs-sm); font-weight: 600; color: var(--sv-brand-600); }
.sv-widget__body { padding: var(--sv-2) 0; }
.sv-widget__empty { padding: var(--sv-8) var(--sv-5); text-align: center; color: var(--sv-muted); }
.sv-widget__empty i { font-size: 28px; color: var(--sv-dim); display: block; margin-bottom: var(--sv-2); }

/* Lista genérica do dashboard (vencimentos, tickets) */
.sv-list { list-style: none; margin: 0; padding: 0; }
.sv-list__item {
  display: flex; align-items: center; gap: var(--sv-3);
  padding: var(--sv-3) var(--sv-5);
  border-bottom: 1px solid var(--sv-border);
  transition: background var(--sv-dur-1) var(--sv-ease);
}
.sv-list__item:last-child { border-bottom: 0; }
.sv-list__item:hover { background: var(--sv-surface-2); }
.sv-list__icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--sv-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sv-brand-tint); color: var(--sv-brand-600); font-size: 15px; }
.sv-list__main { flex: 1 1 auto; min-width: 0; }
.sv-list__title { font-size: var(--sv-fs); font-weight: 600; color: var(--sv-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-list__sub { font-size: var(--sv-fs-sm); color: var(--sv-muted); }
.sv-list__aside { flex: 0 0 auto; text-align: right; display: flex; align-items: center; gap: var(--sv-3); }

/* Realce de vencimento próximo */
.sv-due-soon .sv-list__icon { background: var(--sv-warning-bg); color: var(--sv-warning); }
.sv-due-urgent .sv-list__icon { background: var(--sv-danger-bg); color: var(--sv-danger); }

/* Resumo financeiro com sparkline */
.sv-finance { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sv-4); padding: var(--sv-5); }
.sv-finance__num { font-size: var(--sv-fs-3xl); font-weight: 700; letter-spacing: -0.03em; color: var(--sv-heading); line-height: 1; }
.sv-sparkline { width: 120px; height: 44px; }
.sv-sparkline path { fill: none; stroke: var(--sv-brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-sparkline .sv-spark-fill { fill: var(--sv-brand-tint); stroke: none; }

/* Tiles legados do WHMCS (.tiles) — neutraliza visual antigo se aparecer */
.sv-body .tiles .tile { background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-sm); }

/* ---------- Itens de serviço no painel "Produtos/Serviços" (.div-service-item) ---------- */
/* Lista (sem sub-containers): linhas com divisória full-width dentro do painel */
.sv-body .div-service-item {
  display: flex; align-items: center; gap: var(--sv-3); flex-wrap: wrap;
  padding: var(--sv-3) var(--sv-5); margin: 0 calc(-1 * var(--sv-5));
  border: 0; border-bottom: 1px solid var(--sv-border); border-radius: 0;
  background: transparent;
  transition: background var(--sv-dur-1) var(--sv-ease);
}
.sv-body .div-service-item:last-child { border-bottom: 0; }
.sv-body .div-service-item:hover { background: var(--sv-surface-2); }
.sv-body .div-service-ico {
  flex: 0 0 42px; width: 42px; height: 42px; order: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sv-radius); background: var(--sv-brand-tint); color: var(--sv-brand-600); font-size: 18px;
}
.sv-body .div-service-status { flex: 0 0 auto; order: 2; }
.sv-body .div-service-status .label-placeholder { display: none; }
.sv-body .div-service-status .label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--sv-radius-full);
  font-size: var(--sv-fs-xs); font-weight: 600; line-height: 1.4;
  background: var(--sv-success-bg); color: var(--sv-success);
}
.sv-body .div-service-status .label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sv-body .div-service-status .label-danger,  .sv-body .div-service-status .label-terminated { background: var(--sv-danger-bg);  color: var(--sv-danger); }
.sv-body .div-service-status .label-warning, .sv-body .div-service-status .label-pending    { background: var(--sv-warning-bg); color: var(--sv-warning); }
.sv-body .div-service-status .label-default, .sv-body .div-service-status .label-info       { background: var(--sv-info-bg);    color: var(--sv-info); }
.sv-body .div-service-name { flex: 1 1 220px; min-width: 0; order: 1; display: flex; flex-direction: column; gap: 2px; }
.sv-body .div-service-name .font-weight-bold { color: var(--sv-heading); font-size: var(--sv-fs); }
.sv-body .div-service-name .text-domain { color: var(--sv-muted); font-size: var(--sv-fs-sm); }
.sv-body .div-service-buttons { flex: 0 0 auto; order: 3; display: flex; align-items: center; gap: var(--sv-2); }

/* ============================================================================
   STRTVISION-V2 · 08 · FORMS & TABLES (inputs, selects, DataTables, listas)
   ========================================================================== */

/* ---------- Forms ---------- */
.sv-body .form-control, .sv-body .custom-select, .sv-body select.form-control {
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-sm); color: var(--sv-text);
  font-size: var(--sv-fs); padding: 0.5rem 0.75rem; height: auto; min-height: 40px;
  transition: border-color var(--sv-dur-1) var(--sv-ease), box-shadow var(--sv-dur-1) var(--sv-ease);
}
.sv-body .form-control:focus, .sv-body .custom-select:focus {
  border-color: var(--sv-brand); box-shadow: 0 0 0 3px var(--sv-ring); background: var(--sv-surface); color: var(--sv-text); }
.sv-body .form-control::placeholder { color: var(--sv-dim); }
.sv-body .form-control:disabled, .sv-body .form-control[readonly] { background: var(--sv-surface-2); color: var(--sv-muted); }
.sv-body label, .sv-body .control-label { font-weight: 600; color: var(--sv-heading); font-size: var(--sv-fs-sm); margin-bottom: 6px; }
.sv-body .form-text, .sv-body .help-block { color: var(--sv-muted); font-size: var(--sv-fs-sm); }

/* Input group */
.sv-body .input-group-text { background: var(--sv-surface-2); border: 1px solid var(--sv-border); color: var(--sv-muted); border-radius: var(--sv-radius-sm); }

/* Checkbox / radio (acento âmbar) */
.sv-body input[type="checkbox"], .sv-body input[type="radio"] { accent-color: var(--sv-brand); }

/* ---------- Tabelas ---------- */
.sv-body .table {
  color: var(--sv-text); margin-bottom: 0; background: transparent; }
.sv-body .table thead th {
  background: transparent; border-bottom: 1px solid var(--sv-border);
  border-top: 0; color: var(--sv-muted); font-weight: 600; font-size: var(--sv-fs-xs);
  text-transform: uppercase; letter-spacing: 0.04em; padding: var(--sv-3) var(--sv-4); }
.sv-body .table td { border-top: 1px solid var(--sv-border); padding: var(--sv-3) var(--sv-4); vertical-align: middle; }
.sv-body .table tbody tr { transition: background var(--sv-dur-1) var(--sv-ease); }
.sv-body .table-hover tbody tr:hover, .sv-body .table tbody tr[onclick]:hover { background: var(--sv-surface-2); cursor: pointer; }

/* Container de tabela em card */
.sv-body .table-container, .sv-table-card {
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-sm);
  overflow: hidden; padding: 0; }
.sv-body .table-container .table { width: 100%; }
.sv-body .table-container .table thead th { padding-top: var(--sv-4); }
.sv-body .table-container .table td { padding-left: var(--sv-4); padding-right: var(--sv-4); }

/* DataTables (mantém JS do core) */
.sv-body .dataTables_wrapper { padding: var(--sv-4); }
.sv-body .dataTables_filter input, .sv-body .dataTables_length select {
  border: 1px solid var(--sv-border); border-radius: var(--sv-radius-sm);
  background: var(--sv-surface); padding: 0.35rem 0.6rem; }
.sv-body .dataTables_info, .sv-body .dataTables_length, .sv-body .dataTables_filter { color: var(--sv-muted); font-size: var(--sv-fs-sm); }
.sv-body .dataTables_paginate .paginate_button {
  border-radius: var(--sv-radius-sm) !important; border: 1px solid transparent !important;
  color: var(--sv-muted) !important; padding: 0.3rem 0.7rem !important; }
.sv-body .dataTables_paginate .paginate_button.current {
  background: var(--sv-brand-tint) !important; border-color: var(--sv-brand) !important; color: var(--sv-brand-700) !important; }
.sv-body .dataTables_paginate .paginate_button:hover {
  background: var(--sv-surface-2) !important; border-color: var(--sv-border) !important; color: var(--sv-heading) !important; }

/* list-group (sidebar contextual / painéis) */
.sv-body .list-group-item {
  background: transparent; border-color: var(--sv-border); color: var(--sv-text);
  transition: background var(--sv-dur-1) var(--sv-ease); }
.sv-body .list-group-item-action:hover { background: var(--sv-surface-2); color: var(--sv-heading); }
.sv-body .list-group-item.active {
  background: var(--sv-brand-tint); border-color: transparent; color: var(--sv-brand-700); font-weight: 600; }
.sv-body .list-group-item.active i { color: var(--sv-brand-600); }

/* ============================================================================
   STRTVISION-V2 · 09 · ANIMATIONS (fade, slide, scale, skeleton)
   Motion segura: tudo desligado em prefers-reduced-motion.
   ========================================================================== */

@keyframes sv-fade-in     { from { opacity: 0; }                         to { opacity: 1; } }
@keyframes sv-fade-up     { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sv-slide-in    { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes sv-scale-in    { from { opacity: 0; transform: scale(0.96); }  to { opacity: 1; transform: none; } }
@keyframes sv-shimmer     { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }

.sv-fade-in  { animation: sv-fade-in var(--sv-dur-3) var(--sv-ease) both; }
.sv-fade-up  { animation: sv-fade-up var(--sv-dur-3) var(--sv-ease-out) both; }
.sv-slide-in { animation: sv-slide-in var(--sv-dur-3) var(--sv-ease-out) both; }
.sv-scale-in { animation: sv-scale-in var(--sv-dur-2) var(--sv-ease-out) both; }

/* Stagger para grids (definido inline via --i) */
.sv-stagger > * { animation: sv-fade-up var(--sv-dur-3) var(--sv-ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms); }

/* Reveal: ADITIVO e à prova de falhas. Sem JS, conteúdo SEMPRE visível.
   Com JS (html.sv-js) anima na entrada; a animação 'both' termina visível. */
.sv-reveal { opacity: 1; }
html.sv-js .sv-reveal { animation: sv-fade-up var(--sv-dur-3) var(--sv-ease-out) both; }
html.sv-js .sv-stagger > .sv-reveal { animation-delay: calc(var(--i, 0) * 45ms); }

/* ---------- Skeleton loading ---------- */
.sv-skeleton {
  position: relative; overflow: hidden;
  background: var(--sv-surface-2); border-radius: var(--sv-radius-sm);
  background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,0.65) 50%, transparent 100%);
  background-size: 468px 100%; background-repeat: no-repeat;
  animation: sv-shimmer 1.25s infinite linear;
}
.sv-skeleton--text { height: 12px; margin: 6px 0; }
.sv-skeleton--title { height: 18px; width: 50%; }
.sv-skeleton--line { height: 12px; width: 100%; }
.sv-skeleton--btn { height: 38px; width: 110px; border-radius: var(--sv-radius-sm); }
.sv-skeleton--card { height: 120px; border-radius: var(--sv-radius-lg); }
.sv-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }

/* Spinner do tema */
.sv-spinner { width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--sv-surface-2); border-top-color: var(--sv-brand);
  animation: sv-spin 0.7s linear infinite; display: inline-block; }
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* ---------- Motion segura ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sv-reveal { opacity: 1; transform: none; }
}
/* Toggle por config (animações off) */
.sv-no-motion *, .sv-no-motion *::before, .sv-no-motion *::after {
  animation: none !important; transition: none !important;
}

/* ============================================================================
   STRTVISION-V2 · 10 · UTILITIES (helpers de espaçamento, flex, texto)
   ========================================================================== */

.sv-flex { display: flex; } .sv-inline-flex { display: inline-flex; }
.sv-items-center { align-items: center; } .sv-items-start { align-items: flex-start; }
.sv-justify-between { justify-content: space-between; } .sv-justify-center { justify-content: center; }
.sv-wrap { flex-wrap: wrap; } .sv-col { flex-direction: column; }
.sv-grow { flex: 1 1 auto; } .sv-shrink-0 { flex-shrink: 0; }

.sv-gap-1 { gap: var(--sv-1); } .sv-gap-2 { gap: var(--sv-2); } .sv-gap-3 { gap: var(--sv-3); }
.sv-gap-4 { gap: var(--sv-4); } .sv-gap-5 { gap: var(--sv-5); } .sv-gap-6 { gap: var(--sv-6); }

.sv-mt-2 { margin-top: var(--sv-2); } .sv-mt-3 { margin-top: var(--sv-3); } .sv-mt-4 { margin-top: var(--sv-4); }
.sv-mt-5 { margin-top: var(--sv-5); } .sv-mt-6 { margin-top: var(--sv-6); }
.sv-mb-2 { margin-bottom: var(--sv-2); } .sv-mb-3 { margin-bottom: var(--sv-3); } .sv-mb-4 { margin-bottom: var(--sv-4); }
.sv-mb-5 { margin-bottom: var(--sv-5); } .sv-mb-6 { margin-bottom: var(--sv-6); }

.sv-text-xs { font-size: var(--sv-fs-xs); } .sv-text-sm { font-size: var(--sv-fs-sm); }
.sv-text-lg { font-size: var(--sv-fs-lg); } .sv-text-xl { font-size: var(--sv-fs-xl); }
.sv-fw-600 { font-weight: 600; } .sv-fw-700 { font-weight: 700; }
.sv-text-brand { color: var(--sv-brand-600); } .sv-text-success { color: var(--sv-success); }
.sv-text-danger { color: var(--sv-danger); } .sv-text-warning { color: var(--sv-warning); }
.sv-text-center { text-align: center; } .sv-text-right { text-align: right; }
.sv-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sv-rounded { border-radius: var(--sv-radius); } .sv-rounded-lg { border-radius: var(--sv-radius-lg); }
.sv-rounded-full { border-radius: var(--sv-radius-full); }
.sv-shadow { box-shadow: var(--sv-shadow); } .sv-shadow-lg { box-shadow: var(--sv-shadow-lg); }
.sv-border { border: 1px solid var(--sv-border); }
.sv-bg-surface { background: var(--sv-surface); } .sv-bg-surface-2 { background: var(--sv-surface-2); }

.sv-hidden { display: none !important; }
@media (max-width: 991.98px) { .sv-hide-mobile { display: none !important; } }
@media (min-width: 992px)   { .sv-hide-desktop { display: none !important; } }

/* (sem overrides de container — preservamos os gutters do Bootstrap do twenty-one) */

/* ============================================================================
   STRTVISION-V2 · 11 · LOGIN / AUTH (DOM nativo twenty-one: .login-form .card)
   ========================================================================== */

.sv-body .login-form { max-width: 460px; margin: var(--sv-10) auto; }
.sv-body .login-form .card, .sv-body .card.mw-540 {
  border: 1px solid var(--sv-border); border-radius: var(--sv-radius-xl);
  box-shadow: var(--sv-shadow-lg); overflow: hidden;
}
.sv-body .login-form .card-body { padding: var(--sv-10) var(--sv-8); }
.sv-body .login-form .card-body > .mb-4 h3, .sv-body .login-form .h3 {
  font-size: var(--sv-fs-xl); font-weight: 600; color: var(--sv-heading);
}
.sv-body .login-form .input-group-text { background: var(--sv-surface-2); border-color: var(--sv-border); color: var(--sv-muted); }
.sv-body .login-form .btn-primary { width: 100%; padding: 0.7rem; font-size: var(--sv-fs-md); }
.sv-body .login-form .float-left { float: none !important; width: 100%; }
.sv-body .login-form .card-footer {
  background: var(--sv-surface-2); border-top: 1px solid var(--sv-border);
  padding: var(--sv-4) var(--sv-8); text-align: center; color: var(--sv-muted);
}
.sv-body .login-form .btn-reveal-pw { background: var(--sv-surface-2); border: 1px solid var(--sv-border); color: var(--sv-muted); }

/* Faixa superior de marca no topo do card de login */
.sv-body .login-form .card::before {
  content: ""; display: block; height: 4px; background: var(--sv-grad-brand);
}

/* registro reaproveita */
.sv-body .clientregister-form .card, .sv-body #frmCheckout .card { border-radius: var(--sv-radius-lg); }

/* ============================================================================
   STRTVISION-V2 · 12 · PÁGINAS INTERNAS (polish: product details, módulos,
   progress bars, ações, faturas) — tudo sobre o DOM nativo do twenty-one.
   ========================================================================== */

/* ---------- Títulos de página dentro do conteúdo ---------- */
.sv-body .primary-content > h1:first-child,
.sv-body .primary-content > h2:first-child,
.sv-body .product-details > h1,
.sv-body .product-details > h2 {
  font-size: var(--sv-fs-xl); font-weight: 600; color: var(--sv-heading);
  letter-spacing: -0.02em; margin-bottom: var(--sv-5);
}

/* ---------- Progress bars nativas (uso de RAM/disco/CPU) ---------- */
.sv-body .progress {
  height: 10px; border-radius: var(--sv-radius-full);
  background: var(--sv-surface-2); overflow: hidden; box-shadow: none;
}
.sv-body .progress-bar {
  background: var(--sv-grad-brand); border-radius: var(--sv-radius-full);
  font-size: 10px; font-weight: 600;
}
.sv-body .progress-bar.bg-success, .sv-body .progress-bar.progress-bar-success { background: var(--sv-success); }
.sv-body .progress-bar.bg-warning, .sv-body .progress-bar.progress-bar-warning { background: var(--sv-warning); }
.sv-body .progress-bar.bg-danger,  .sv-body .progress-bar.progress-bar-danger  { background: var(--sv-danger); }

/* ---------- Detalhes do Produto ---------- */
.sv-body .product-details .product-details-tab-container { margin-top: var(--sv-4); }

/* Painel do módulo (game/VPS panel) — organiza num cartão claro */
.sv-body .module-client-area {
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-sm);
  padding: var(--sv-6); margin-top: var(--sv-4);
}
.sv-body .module-client-area .margin-top-bottom { margin: var(--sv-3) 0; }
.sv-body .module-client-area label { color: var(--sv-muted); font-size: var(--sv-fs-sm); }
.sv-body #game-server-status .label,
.sv-body #game-server-status .badge {
  border-radius: var(--sv-radius-full); padding: 4px 12px; font-weight: 600;
}

/* Centralização dos tabs do módulo (já vêm centralizados) */
.sv-body .nav-tabs.justify-content-center { border-bottom: 1px solid var(--sv-border); }
.sv-body .product-details-tab-container .tab-content { padding-top: var(--sv-4); }

/* ---------- Sidebar de ações (AÇÕES RÁPIDAS / panel-actions) ---------- */
.sv-body .panel-actions .card-body h2,
.sv-body .panel-actions h2 {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sv-dim); margin: 0 0 var(--sv-3);
}
.sv-body .panel-actions .btn { width: 100%; margin-bottom: var(--sv-2); justify-content: center; }
.sv-body .panel-actions .card-body { display: flex; flex-direction: column; }

/* ---------- Faturas: alinhamento de ações e valores ---------- */
.sv-body .table-list td .btn-icon { color: var(--sv-muted); }
.sv-body .table-list td .btn-icon:hover { color: var(--sv-brand-600); }
.sv-body .view-filter-btns .btn { justify-content: center; }

/* ---------- Cartões "well"/legados → superfície limpa ---------- */
.sv-body .well, .sv-body .jumbotron {
  background: var(--sv-surface); border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-sm);
}

/* ---------- Inputs do módulo (ID do servidor etc.) ---------- */
.sv-body .module-client-area input.form-control { max-width: 420px; margin: 0 auto; }

/* ---------- Banner de verificação de e-mail (compacto, em cartão) ---------- */
.sv-body .sv-verify {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: var(--sv-4) 0 0 !important; margin: 0 !important;
}
.sv-body .sv-verify__inner {
  display: flex; align-items: center; gap: var(--sv-3);
  background: var(--sv-warning-bg);
  border: 1px solid rgba(217,119,6,0.22);
  border-radius: var(--sv-radius-lg);
  padding: var(--sv-3) var(--sv-4);
}
.sv-body .sv-verify__icon {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--sv-radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--sv-grad-brand); color: #fff; font-size: 15px; line-height: 1;
}
.sv-body .sv-verify__icon i { display: block; line-height: 1; }
.sv-body .sv-verify__text { flex: 1 1 auto; color: var(--sv-heading); font-weight: 500; font-size: var(--sv-fs); }
.sv-body .sv-verify__resend {
  flex: 0 0 auto; width: auto !important;
  background: var(--sv-grad-brand) !important; border: none !important; color: #fff !important;
  border-radius: var(--sv-radius-sm) !important; font-weight: 600; padding: 0.45rem 1rem !important;
}
.sv-body .sv-verify__resend:hover { box-shadow: var(--sv-glow-brand); }
.sv-body .sv-verify__close {
  flex: 0 0 auto; color: var(--sv-muted); opacity: .6; font-size: 18px;
  background: transparent !important; border: 0 !important; padding: 0 6px !important; text-shadow: none;
}
.sv-body .sv-verify__close:hover { opacity: 1; color: var(--sv-heading); }
@media (max-width: 575.98px) {
  .sv-body .sv-verify__inner { flex-wrap: wrap; }
  .sv-body .sv-verify__text { flex: 1 1 100%; }
  .sv-body .sv-verify__resend { flex: 1 1 auto; }
}

/* ---------- Dashboard: widgets em grid de altura igual ---------- */
.sv-widgets-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sv-6); align-items: stretch;
}
.sv-widgets-grid > .card { height: 100%; display: flex; flex-direction: column; margin: 0; }
.sv-widgets-grid > .card .card-body,
.sv-widgets-grid > .card .list-group { flex: 1 1 auto; }
.sv-widget--full { grid-column: 1 / -1; }
@media (max-width: 991.98px) { .sv-widgets-grid { grid-template-columns: 1fr; } }