/* Use a generic sans + mono — keep dense console feel.
   (Inter via Google Fonts; uma vez aceite, podemos migrar para next/font.) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* SmartCloud Painel — dark navy console tokens */
:root {
  --bg-0: #0a1020;
  --bg-1: #0f1730;
  --bg-2: #141d3a;
  --bg-3: #1b2547;
  --bg-4: #232f55;
  --line: rgba(120, 145, 200, 0.14);
  --line-2: rgba(120, 145, 200, 0.22);
  --line-3: rgba(120, 145, 200, 0.32);
  --fg-0: #e8edfb;
  --fg-1: #b4bedb;
  --fg-2: #7a87ac;
  --fg-3: #58658a;
  --accent: #5be9ff;
  --accent-2: #2cc7e0;
  --accent-dim: rgba(91, 233, 255, 0.12);
  --accent-dim-2: rgba(91, 233, 255, 0.22);
  /* Cor do texto/ícone EM CIMA de superfícies de accent (botões primários, avatares).
     Default escuro (accents claros). Temas de accent escuro sobrepõem para claro. */
  --on-accent: #001b22;
  /* Texto que usa a cor de marca (links, KPI accent, chips) — em temas escuros
     sobrepõe-se para tom legível; evita #ce1126 “preto” sobre fundo preto. */
  --accent-fg: var(--accent);
  --ok: #4ade80;
  --ok-dim: rgba(74, 222, 128, 0.14);
  --warn: #fbbf24;
  --warn-dim: rgba(251, 191, 36, 0.14);
  --err: #f87171;
  --err-dim: rgba(248, 113, 113, 0.14);
  --info: #818cf8;
  --info-dim: rgba(129, 140, 248, 0.14);
  --magenta: #f472b6;
  --magenta-dim: rgba(244, 114, 182, 0.14);
  --font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

.sc-app {
  width: 100%;
  height: 100vh;            /* console-style: chrome fixo, paineis internos scrollam */
  max-height: 100vh;
  background: var(--bg-0);
  color: var(--fg-0);
  --nav-active-fg: var(--accent);
  --nav-active-bg: var(--accent-dim);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;         /* impede page-scroll global; cada container interno faz auto */
  position: relative;
  display: flex;
  flex-direction: column;
  font-feature-settings: "cv11", "ss01", "tnum";
}
/* Em viewports muito curtos (< 600px alto) permitimos que o .sc-app cresça
   e a página possa fazer scroll — fallback para acessibilidade. */
@media (max-height: 600px) {
  .sc-app {
    height: auto;
    max-height: none;
    min-height: 100vh;
    overflow: visible;
  }
}
.sc-app * { box-sizing: border-box; }
.sc-app button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.sc-app input, .sc-app select, .sc-app textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--fg-2); }
.dim { color: var(--fg-3); }

/* Scrollbar — sempre visível, com bom contraste em todos os temas.
   `-webkit-appearance: none` desliga o overlay-scrollbar do macOS — força a
   scrollbar a reservar espaço e a ser visível como em Linux/Windows. */
.sc-app ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}
.sc-app ::-webkit-scrollbar-track {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}
.sc-app ::-webkit-scrollbar-thumb {
  background: var(--fg-3);
  border: 3px solid var(--bg-2);
  border-radius: 8px;
  min-height: 44px;
  min-width: 44px;
}
.sc-app ::-webkit-scrollbar-thumb:hover { background: var(--fg-2); }
.sc-app ::-webkit-scrollbar-corner { background: var(--bg-2); }
.sc-app { scrollbar-color: var(--fg-3) var(--bg-2); }  /* Firefox */

/* No html/body (página fora do .sc-app — caso o demo renderize em modo natural) */
html, body { scrollbar-color: #58658a #0a1020; }
html::-webkit-scrollbar, body::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  background: #0a1020;
  border-left: 1px solid rgba(120,145,200,0.22);
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: #58658a;
  border: 3px solid #0a1020;
  border-radius: 8px;
  min-height: 44px;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
  background: #7a87ac;
}

/* Tables: garantir scroll horizontal quando colunas excedem o container.
   `.card:has(table.tbl)` apanha todos os cards do app que contêm uma tabela. */
.sc-app .tbl-wrap, .sc-app .tbl-scroll {
  width: 100%;
  overflow: auto;
}
/* Força scrollbar horizontal SEMPRE visível em qualquer container que envolva
   directamente uma tabela `.tbl` — funciona com `.card`, `div` flex wrapper,
   ou qualquer outro pai. `scroll` em vez de `auto` ignora o overlay-scroll do
   macOS — assim o thumb aparece sempre que a tabela for mais larga que o pai. */
/* Container que envolve uma tabela tem scroll horizontal + bottom border
   sempre visível a indicar a track da scrollbar (o macOS Chrome esconde a
   scrollbar real em overlay-mode, esta border garante que se vê o trilho). */
.sc-app *:has(> table.tbl) {
  overflow-x: scroll !important;
  scrollbar-gutter: stable;
  border-bottom: 4px solid var(--bg-3);
}
.sc-app *:has(> table.tbl)::-webkit-scrollbar {
  -webkit-appearance: none !important;
  height: 12px !important;
  background: var(--bg-2) !important;
}
.sc-app *:has(> table.tbl)::-webkit-scrollbar-thumb {
  background: var(--fg-3) !important;
  border: 2px solid var(--bg-2) !important;
  border-radius: 6px !important;
  min-width: 60px;
}
.sc-app *:has(> table.tbl)::-webkit-scrollbar-thumb:hover {
  background: var(--fg-2) !important;
}
.sc-app table.tbl {
  min-width: 720px;
}
.sc-app .tbl-scroll, .sc-app .tbl-wrap {
  overflow-x: scroll;
  scrollbar-gutter: stable;
}

/* Status dot */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
}
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-dim); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim); }
.dot.err { background: var(--err); box-shadow: 0 0 0 3px var(--err-dim); }
.dot.info { background: var(--info); box-shadow: 0 0 0 3px var(--info-dim); }
.dot.muted { background: var(--fg-3); }

/* Chip / pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-1);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.chip.ok    { background: var(--ok-dim);    color: var(--ok);    border-color: transparent; }
.chip.warn  { background: var(--warn-dim);  color: var(--warn);  border-color: transparent; }
.chip.err   { background: var(--err-dim);   color: var(--err);   border-color: transparent; }
.chip.info  { background: var(--info-dim);  color: var(--info);  border-color: transparent; }
.chip.accent{ background: var(--accent-dim);color: var(--accent-fg, var(--accent));border-color: transparent; }
.chip.mag   { background: var(--magenta-dim);color: var(--magenta);border-color: transparent; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg-0);
  font-size: 12px;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-3); border-color: var(--line-3); }
.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg-2); }
.btn.danger { color: var(--err); border-color: rgba(248,113,113,0.3); }
.btn.danger:hover { background: var(--err-dim); border-color: var(--err); }
.btn.sm { padding: 3px 8px; font-size: 11px; }

/* Card — sobrepõe Tailwind globals (.text-card-foreground ≈ preto) */
.sc-app .card {
  color: var(--fg-0);
  background: var(--bg-1);
  border-color: var(--line);
}
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.card-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.card-body { padding: 14px; }

/* Table */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th, .tbl td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl th {
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  background: var(--bg-1);
  position: sticky;
  top: 0;
  z-index: 1;
}
.tbl tr:hover td { background: var(--bg-2); }
.tbl tr.selected td { background: var(--accent-dim); }

/* ── Cliente 360 · tabela de serviços (moderna) ── */
.v3-svc-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-1);
  overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--fg-0) 4%, transparent);
}
.v3-svc-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
}
.v3-svc-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.v3-svc-panel-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--fg-2);
}

.v3-data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.v3-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.v3-data-table th,
.v3-data-table td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.v3-data-table thead th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  background: var(--bg-0);
  white-space: nowrap;
}
.v3-data-table tbody tr {
  transition: background 0.12s ease;
}
.v3-data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-1));
}
.v3-data-table tbody tr:last-child td {
  border-bottom: none;
}
.v3-data-table-num {
  text-align: right !important;
  white-space: nowrap;
}
.v3-data-table-name {
  min-width: 200px;
  max-width: 360px;
}

.v3-svc-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v3-svc-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.v3-svc-icon--hosting {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  color: var(--accent-fg, var(--accent));
}
.v3-svc-icon--email {
  background: color-mix(in srgb, var(--info) 14%, var(--bg-2));
  color: var(--info);
}
.v3-svc-icon--domain {
  background: color-mix(in srgb, var(--ok) 14%, var(--bg-2));
  color: var(--ok);
}
.v3-svc-icon--ssl {
  background: color-mix(in srgb, var(--magenta) 12%, var(--bg-2));
  color: var(--magenta);
}
.v3-svc-icon--vps {
  background: color-mix(in srgb, var(--warn) 14%, var(--bg-2));
  color: var(--warn);
}
.v3-svc-icon--default {
  background: var(--bg-2);
  color: var(--fg-2);
}
.v3-svc-name-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.v3-svc-name-primary {
  font-weight: 500;
  color: var(--fg-0);
  line-height: 1.35;
}
.v3-svc-name-sub {
  font-size: 11px;
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-svc-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.v3-svc-type--hosting {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-fg, var(--accent));
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.v3-svc-type--email {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 22%, transparent);
}
.v3-svc-type--domain {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 22%, transparent);
}
.v3-svc-type--ssl {
  background: color-mix(in srgb, var(--magenta) 10%, transparent);
  color: var(--magenta);
  border-color: color-mix(in srgb, var(--magenta) 20%, transparent);
}
.v3-svc-type--vps {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 22%, transparent);
}
.v3-svc-type--default {
  background: var(--bg-2);
  color: var(--fg-2);
  border-color: var(--line);
}

.v3-svc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}
.v3-svc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.v3-svc-status--ok { color: var(--ok); }
.v3-svc-status--ok .v3-svc-status-dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.v3-svc-status--warn { color: var(--warn); }
.v3-svc-status--warn .v3-svc-status-dot { background: var(--warn); }
.v3-svc-status--info { color: var(--info); }
.v3-svc-status--info .v3-svc-status-dot { background: var(--info); }
.v3-svc-status--err { color: var(--err); }
.v3-svc-status--err .v3-svc-status-dot { background: var(--err); }
.v3-svc-status--default { color: var(--fg-2); }
.v3-svc-status--default .v3-svc-status-dot { background: var(--fg-3); }

.v3-svc-price {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-0);
}
.v3-svc-cycle {
  display: block;
  font-size: 10px;
  margin-top: 2px;
  text-transform: lowercase;
}

.v3-data-table tfoot td {
  background: var(--bg-0);
  border-top: 1px solid var(--line);
  border-bottom: none;
  padding: 14px 18px;
}
.v3-svc-foot-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
}
.v3-svc-foot-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-fg, var(--accent));
}

@media (max-width: 640px) {
  .v3-data-table th,
  .v3-data-table td {
    padding: 10px 12px;
  }
  .v3-svc-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .v3-svc-panel-head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Inputs */
.input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.input input { width: 100%; }
.input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.v4-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.v4-toggle {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.v4-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg-1);
  transition: transform 0.15s;
}
.v4-toggle[data-on="1"] {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.v4-toggle[data-on="1"]::after {
  transform: translateX(18px);
  background: var(--accent);
}

/* Modal */
.modal-back {
  position: absolute; inset: 0;
  background: rgba(5, 8, 18, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fadeIn .14s ease-out;
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--line-3);
  border-radius: 10px;
  min-width: 420px;
  max-width: 640px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: pop .14s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Sparkline */
.spark { display: block; }

/* Generic flex utilities */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }

/* Bar */
.bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-3);
  overflow: hidden;
  position: relative;
}
.bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.bar.warn > i { background: var(--warn); }
.bar.err > i { background: var(--err); }
.bar.ok > i { background: var(--ok); }

/* Section heading inside variant */
.sec-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  padding: 0 8px;
  margin: 14px 0 6px;
}

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ───────────────────────── Mobile responsive ─────────────────────────
   Em viewports < 900px (tablet vertical e telemóvel):
   - SubSidebar e ActivityRail viram drawer slide-in (escondidos por defeito).
   - TopBar esconde breadcrumb verbose e o search compacta.
   - Tabs ganham scroll horizontal.
   - AppShell aplica `.mobile-side-open` quando o hamburger é clicado.
*/
.sc-app .mobile-only { display: none; }

@media (max-width: 900px) {
  .sc-app .mobile-only { display: inline-flex; }
  .sc-app .desktop-only { display: none; }
  .sc-app .v3-tabbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .sc-app .v3-tabbar::-webkit-scrollbar { height: 4px; }
  .sc-app .v3-tab { flex: none; white-space: nowrap; }

  /* SubSidebar fica fixa fora do ecrã — slide-in quando .mobile-side-open */
  .sc-app aside.v3-sub-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform .2s ease-out;
    box-shadow: var(--shadow-lg);
  }
  .sc-app.mobile-side-open aside.v3-sub-side { transform: translateX(0); }

  /* ActivityRail escondida no mobile */
  .sc-app aside.v3-act-rail { display: none; }

  /* TopBar: esconder breadcrumb e compactar search */
  .sc-app .topbar-breadcrumb { display: none; }
  .sc-app header .topbar-search-input {
    min-width: 44px !important;
    width: 44px;
    padding: 5px 8px !important;
  }
  .sc-app header .topbar-search-text,
  .sc-app header .topbar-search-kbd { display: none; }
}

/* Drawer + rail: em tablet esconde rail; em desktop largo mostra os dois */
@media (min-width: 901px) and (max-width: 1279px) {
  .sc-app.has-detail-drawer aside.v3-act-rail { display: none !important; }
}

@media (min-width: 1280px) {
  .sc-app.has-detail-drawer aside.v3-act-rail { display: flex !important; }
}

@media (max-width: 540px) {
  .sc-app .v3-tab { padding: 8px 10px; font-size: 11.5px; }
  .sc-app header { padding: 0 10px !important; gap: 6px !important; }
  /* Esconder também o tenant switcher em telemóvel — fica no Tweaks panel */
  .sc-app .topbar-tenant { display: none; }
}

/* Backdrop quando sub-sidebar aberto em mobile */
.sc-app .mobile-side-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 79;
  animation: v3fadeUp .15s ease-out;
}
.sc-app.mobile-side-open .mobile-side-backdrop { display: block; }

/* Portal cliente — polish (emil/layout): focus, hover, legibilidade */
.portal-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.portal-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.portal-input:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.portal-card:hover {
  border-color: var(--line-2, var(--line));
}
a[style*="var(--accent)"] {
  color: var(--accent-fg, var(--accent)) !important;
}
.sc-app.theme-angola-preto-vermelho .portal-card,
.sc-app.theme-angola-preto-vermelho .card {
  color: var(--fg-0);
}
.sc-app.theme-angola-preto-vermelho a {
  color: var(--accent-fg, #ff8a96);
}

/* themes.css — alternative palettes for the SmartCloud painel.
   Each .theme-X class overrides the tokens defined in styles.css.
   Applied to the .sc-app wrapper so each artboard / mount can have its own theme. */

/* ── Midnight (default, no-op) ─────────────────────────────────────────── */
.sc-app.theme-midnight { /* already the default — no overrides needed */ }

/* ── Carbon · true dark neutral with soft mint accent ─────────────────── */
.sc-app.theme-carbon {
  --bg-0: #0a0a0c;
  --bg-1: #111114;
  --bg-2: #18181c;
  --bg-3: #222226;
  --bg-4: #2d2d33;
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.1);
  --line-3: rgba(255, 255, 255, 0.16);
  --fg-0: #f4f4f5;
  --fg-1: #c4c4c8;
  --fg-2: #82828c;
  --fg-3: #56565e;
  --accent: #86efac;
  --accent-2: #4ade80;
  --accent-dim: rgba(134, 239, 172, 0.12);
  --accent-dim-2: rgba(134, 239, 172, 0.22);
  --ok: #86efac;
  --ok-dim: rgba(134, 239, 172, 0.14);
  --warn: #fde047;
  --warn-dim: rgba(253, 224, 71, 0.14);
  --err: #fda4af;
  --err-dim: rgba(253, 164, 175, 0.14);
  --info: #93c5fd;
  --info-dim: rgba(147, 197, 253, 0.14);
  --magenta: #f9a8d4;
  --magenta-dim: rgba(249, 168, 212, 0.14);
}

/* ── Daylight · light theme ──────────────────────────────────────────── */
.sc-app.theme-daylight {
  --bg-0: #fafafb;
  --bg-1: #ffffff;
  --bg-2: #f4f4f6;
  --bg-3: #e8e8ec;
  --bg-4: #d8d8de;
  --line: rgba(16, 24, 40, 0.08);
  --line-2: rgba(16, 24, 40, 0.14);
  --line-3: rgba(16, 24, 40, 0.22);
  --fg-0: #0c1424;
  --fg-1: #344054;
  --fg-2: #667085;
  --fg-3: #98a2b3;
  --accent: #2a6fdb;
  --accent-2: #1f54b2;
  --on-accent: #ffffff;
  --accent-dim: rgba(42, 111, 219, 0.1);
  --accent-dim-2: rgba(42, 111, 219, 0.18);
  --ok: #16a34a;
  --ok-dim: rgba(22, 163, 74, 0.1);
  --warn: #d97706;
  --warn-dim: rgba(217, 119, 6, 0.12);
  --err: #dc2626;
  --err-dim: rgba(220, 38, 38, 0.1);
  --info: #6366f1;
  --info-dim: rgba(99, 102, 241, 0.1);
  --magenta: #db2777;
  --magenta-dim: rgba(219, 39, 119, 0.1);
}
.sc-app.theme-daylight ::-webkit-scrollbar-thumb { background: rgba(16,24,40,0.18); }
.sc-app.theme-daylight ::-webkit-scrollbar-thumb:hover { background: rgba(16,24,40,0.32); }

/* ── Aurora · indigo/purple with iridescent accents ──────────────────── */
.sc-app.theme-aurora {
  --bg-0: #0a0a1a;
  --bg-1: #131229;
  --bg-2: #1a1934;
  --bg-3: #232246;
  --bg-4: #2f2e58;
  --line: rgba(196, 181, 253, 0.1);
  --line-2: rgba(196, 181, 253, 0.16);
  --line-3: rgba(196, 181, 253, 0.26);
  --fg-0: #f5f3ff;
  --fg-1: #c4b5fd;
  --fg-2: #8b85b8;
  --fg-3: #5a567a;
  --accent: #c4b5fd;
  --accent-2: #a78bfa;
  --accent-dim: rgba(196, 181, 253, 0.14);
  --accent-dim-2: rgba(196, 181, 253, 0.24);
  --ok: #5eead4;
  --ok-dim: rgba(94, 234, 212, 0.14);
  --warn: #fbbf24;
  --warn-dim: rgba(251, 191, 36, 0.14);
  --err: #fb7185;
  --err-dim: rgba(251, 113, 133, 0.14);
  --info: #93c5fd;
  --info-dim: rgba(147, 197, 253, 0.14);
  --magenta: #f0abfc;
  --magenta-dim: rgba(240, 171, 252, 0.14);
}

/* ── Sunset · warm coral/peach on dark ────────────────────────────────── */
.sc-app.theme-sunset {
  --bg-0: #1a0e14;
  --bg-1: #261620;
  --bg-2: #321e2b;
  --bg-3: #3f273a;
  --bg-4: #4d3147;
  --line: rgba(251, 146, 60, 0.1);
  --line-2: rgba(251, 146, 60, 0.18);
  --line-3: rgba(251, 146, 60, 0.28);
  --fg-0: #fff5ee;
  --fg-1: #fed7aa;
  --fg-2: #c4937a;
  --fg-3: #806251;
  --accent: #fb923c;
  --accent-2: #ea580c;
  --accent-dim: rgba(251, 146, 60, 0.14);
  --accent-dim-2: rgba(251, 146, 60, 0.24);
  --ok: #facc15;
  --ok-dim: rgba(250, 204, 21, 0.14);
  --warn: #fbbf24;
  --warn-dim: rgba(251, 191, 36, 0.14);
  --err: #f43f5e;
  --err-dim: rgba(244, 63, 94, 0.14);
  --info: #f472b6;
  --info-dim: rgba(244, 114, 182, 0.14);
  --magenta: #ec4899;
  --magenta-dim: rgba(236, 72, 153, 0.14);
}

/* ── Forest · pine green calm ────────────────────────────────────────── */
.sc-app.theme-forest {
  --bg-0: #0a1410;
  --bg-1: #11201a;
  --bg-2: #182c24;
  --bg-3: #21392f;
  --bg-4: #2a4639;
  --line: rgba(134, 239, 172, 0.1);
  --line-2: rgba(134, 239, 172, 0.18);
  --line-3: rgba(134, 239, 172, 0.28);
  --fg-0: #ecfdf5;
  --fg-1: #a7f3d0;
  --fg-2: #6ee7b7;
  --fg-3: #4d7c6c;
  --accent: #34d399;
  --accent-2: #10b981;
  --accent-dim: rgba(52, 211, 153, 0.14);
  --accent-dim-2: rgba(52, 211, 153, 0.24);
  --ok: #86efac;
  --ok-dim: rgba(134, 239, 172, 0.14);
  --warn: #facc15;
  --warn-dim: rgba(250, 204, 21, 0.14);
  --err: #f87171;
  --err-dim: rgba(248, 113, 113, 0.14);
  --info: #38bdf8;
  --info-dim: rgba(56, 189, 248, 0.14);
  --magenta: #c084fc;
  --magenta-dim: rgba(192, 132, 252, 0.14);
}

/* ── Ocean · deep navy + teal ─────────────────────────────────────────── */
.sc-app.theme-ocean {
  --bg-0: #051923;
  --bg-1: #082633;
  --bg-2: #0b3345;
  --bg-3: #114e6a;
  --bg-4: #176089;
  --line: rgba(94, 234, 212, 0.1);
  --line-2: rgba(94, 234, 212, 0.18);
  --line-3: rgba(94, 234, 212, 0.28);
  --fg-0: #ecfeff;
  --fg-1: #a5f3fc;
  --fg-2: #67e8f9;
  --fg-3: #3c7d8c;
  --accent: #22d3ee;
  --accent-2: #06b6d4;
  --accent-dim: rgba(34, 211, 238, 0.14);
  --accent-dim-2: rgba(34, 211, 238, 0.24);
  --ok: #5eead4;
  --ok-dim: rgba(94, 234, 212, 0.14);
  --warn: #fcd34d;
  --warn-dim: rgba(252, 211, 77, 0.14);
  --err: #fb7185;
  --err-dim: rgba(251, 113, 133, 0.14);
  --info: #818cf8;
  --info-dim: rgba(129, 140, 248, 0.14);
  --magenta: #c084fc;
  --magenta-dim: rgba(192, 132, 252, 0.14);
}

/* ── Nord · cool blue-gray ────────────────────────────────────────────── */
.sc-app.theme-nord {
  --bg-0: #2e3440;
  --bg-1: #3b4252;
  --bg-2: #434c5e;
  --bg-3: #4c566a;
  --bg-4: #5e6779;
  --line: rgba(216, 222, 233, 0.1);
  --line-2: rgba(216, 222, 233, 0.18);
  --line-3: rgba(216, 222, 233, 0.28);
  --fg-0: #eceff4;
  --fg-1: #d8dee9;
  --fg-2: #a3aab7;
  --fg-3: #6b7180;
  --accent: #88c0d0;
  --accent-2: #5e81ac;
  --accent-dim: rgba(136, 192, 208, 0.14);
  --accent-dim-2: rgba(136, 192, 208, 0.24);
  --ok: #a3be8c;
  --ok-dim: rgba(163, 190, 140, 0.14);
  --warn: #ebcb8b;
  --warn-dim: rgba(235, 203, 139, 0.14);
  --err: #bf616a;
  --err-dim: rgba(191, 97, 106, 0.14);
  --info: #81a1c1;
  --info-dim: rgba(129, 161, 193, 0.14);
  --magenta: #b48ead;
  --magenta-dim: rgba(180, 142, 173, 0.14);
}

/* ── Monokai · vibrant editor classic ───────────────────────────────── */
.sc-app.theme-monokai {
  --bg-0: #272822;
  --bg-1: #2d2e26;
  --bg-2: #3a3b32;
  --bg-3: #49493f;
  --bg-4: #5b5b4d;
  --line: rgba(248, 248, 242, 0.08);
  --line-2: rgba(248, 248, 242, 0.14);
  --line-3: rgba(248, 248, 242, 0.22);
  --fg-0: #f8f8f2;
  --fg-1: #cfcfc2;
  --fg-2: #8d8d80;
  --fg-3: #595950;
  --accent: #66d9ef;
  --accent-2: #29b8d8;
  --accent-dim: rgba(102, 217, 239, 0.14);
  --accent-dim-2: rgba(102, 217, 239, 0.24);
  --ok: #a6e22e;
  --ok-dim: rgba(166, 226, 46, 0.14);
  --warn: #e6db74;
  --warn-dim: rgba(230, 219, 116, 0.14);
  --err: #f92672;
  --err-dim: rgba(249, 38, 114, 0.14);
  --info: #ae81ff;
  --info-dim: rgba(174, 129, 255, 0.14);
  --magenta: #fd971f;
  --magenta-dim: rgba(253, 151, 31, 0.14);
}

/* ── Rosé Pine · soft mauve ────────────────────────────────────────── */
.sc-app.theme-rose {
  --bg-0: #191724;
  --bg-1: #1f1d2e;
  --bg-2: #26233a;
  --bg-3: #2d2a44;
  --bg-4: #393552;
  --line: rgba(224, 222, 244, 0.1);
  --line-2: rgba(224, 222, 244, 0.18);
  --line-3: rgba(224, 222, 244, 0.28);
  --fg-0: #e0def4;
  --fg-1: #c4c0db;
  --fg-2: #908caa;
  --fg-3: #6e6a86;
  --accent: #ebbcba;
  --accent-2: #d68d8a;
  --accent-dim: rgba(235, 188, 186, 0.14);
  --accent-dim-2: rgba(235, 188, 186, 0.24);
  --ok: #9ccfd8;
  --ok-dim: rgba(156, 207, 216, 0.14);
  --warn: #f6c177;
  --warn-dim: rgba(246, 193, 119, 0.14);
  --err: #eb6f92;
  --err-dim: rgba(235, 111, 146, 0.14);
  --info: #c4a7e7;
  --info-dim: rgba(196, 167, 231, 0.14);
  --magenta: #f2a3c0;
  --magenta-dim: rgba(242, 163, 192, 0.14);
}

/* ── Solarized Light · classic warm light ───────────────────────────── */
.sc-app.theme-solar {
  --bg-0: #fdf6e3;
  --bg-1: #eee8d5;
  --bg-2: #e4ddc4;
  --bg-3: #d8d2b5;
  --bg-4: #c2bfa1;
  --line: rgba(101, 123, 131, 0.16);
  --line-2: rgba(101, 123, 131, 0.26);
  --line-3: rgba(101, 123, 131, 0.4);
  --fg-0: #002b36;
  --fg-1: #073642;
  --fg-2: #657b83;
  --fg-3: #93a1a1;
  --accent: #268bd2;
  --on-accent: #ffffff;
  --accent-2: #1f6ba3;
  --accent-dim: rgba(38, 139, 210, 0.1);
  --accent-dim-2: rgba(38, 139, 210, 0.2);
  --ok: #859900;
  --ok-dim: rgba(133, 153, 0, 0.12);
  --warn: #b58900;
  --warn-dim: rgba(181, 137, 0, 0.12);
  --err: #dc322f;
  --err-dim: rgba(220, 50, 47, 0.1);
  --info: #6c71c4;
  --info-dim: rgba(108, 113, 196, 0.1);
  --magenta: #d33682;
  --magenta-dim: rgba(211, 54, 130, 0.12);
}
.sc-app.theme-solar ::-webkit-scrollbar-thumb { background: rgba(101,123,131,0.3); }
.sc-app.theme-solar ::-webkit-scrollbar-thumb:hover { background: rgba(101,123,131,0.5); }

/* ── Gruvbox · warm retro dark ──────────────────────────────────────── */
.sc-app.theme-gruvbox {
  --bg-0: #1d2021;
  --bg-1: #282828;
  --bg-2: #32302f;
  --bg-3: #3c3836;
  --bg-4: #504945;
  --line: rgba(235, 219, 178, 0.1);
  --line-2: rgba(235, 219, 178, 0.18);
  --line-3: rgba(235, 219, 178, 0.28);
  --fg-0: #fbf1c7;
  --fg-1: #ebdbb2;
  --fg-2: #a89984;
  --fg-3: #7c6f64;
  --accent: #fabd2f;
  --accent-2: #d79921;
  --accent-dim: rgba(250, 189, 47, 0.14);
  --accent-dim-2: rgba(250, 189, 47, 0.24);
  --ok: #b8bb26;
  --ok-dim: rgba(184, 187, 38, 0.14);
  --warn: #fe8019;
  --warn-dim: rgba(254, 128, 25, 0.14);
  --err: #fb4934;
  --err-dim: rgba(251, 73, 52, 0.14);
  --info: #83a598;
  --info-dim: rgba(131, 165, 152, 0.14);
  --magenta: #d3869b;
  --magenta-dim: rgba(211, 134, 155, 0.14);
}

/* ── Dracula · iconic purple dark ───────────────────────────────────── */
.sc-app.theme-dracula {
  --bg-0: #282a36;
  --bg-1: #353746;
  --bg-2: #44475a;
  --bg-3: #525469;
  --bg-4: #6272a4;
  --line: rgba(248, 248, 242, 0.08);
  --line-2: rgba(248, 248, 242, 0.16);
  --line-3: rgba(248, 248, 242, 0.26);
  --fg-0: #f8f8f2;
  --fg-1: #d6d6cc;
  --fg-2: #9a9a8e;
  --fg-3: #6272a4;
  --accent: #bd93f9;
  --accent-2: #9b6dee;
  --accent-dim: rgba(189, 147, 249, 0.14);
  --accent-dim-2: rgba(189, 147, 249, 0.24);
  --ok: #50fa7b;
  --ok-dim: rgba(80, 250, 123, 0.14);
  --warn: #f1fa8c;
  --warn-dim: rgba(241, 250, 140, 0.14);
  --err: #ff5555;
  --err-dim: rgba(255, 85, 85, 0.14);
  --info: #8be9fd;
  --info-dim: rgba(139, 233, 253, 0.14);
  --magenta: #ff79c6;
  --magenta-dim: rgba(255, 121, 198, 0.14);
}

/* ── Cyberpunk · neon pink/cyan vibrancy ────────────────────────────── */
.sc-app.theme-cyberpunk {
  --bg-0: #0d0221;
  --bg-1: #170734;
  --bg-2: #240b47;
  --bg-3: #321263;
  --bg-4: #441e84;
  --line: rgba(255, 0, 222, 0.12);
  --line-2: rgba(255, 0, 222, 0.22);
  --line-3: rgba(255, 0, 222, 0.36);
  --fg-0: #f0eaff;
  --fg-1: #c2b8ff;
  --fg-2: #8c7fcc;
  --fg-3: #5a4f8d;
  --accent: #ff2bd6;
  --on-accent: #ffffff;
  --accent-2: #d61bb0;
  --accent-dim: rgba(255, 43, 214, 0.18);
  --accent-dim-2: rgba(255, 43, 214, 0.32);
  --ok: #39ff14;
  --ok-dim: rgba(57, 255, 20, 0.14);
  --warn: #ffd60a;
  --warn-dim: rgba(255, 214, 10, 0.14);
  --err: #ff0040;
  --err-dim: rgba(255, 0, 64, 0.18);
  --info: #00f0ff;
  --info-dim: rgba(0, 240, 255, 0.16);
  --magenta: #ff79f8;
  --magenta-dim: rgba(255, 121, 248, 0.14);
}

/* ── Sandstone · warm beige light ──────────────────────────────────── */
.sc-app.theme-sandstone {
  --bg-0: #f5f1e8;
  --bg-1: #fefcf7;
  --bg-2: #f0ead8;
  --bg-3: #e4ddc4;
  --bg-4: #c9bf9c;
  --line: rgba(85, 67, 50, 0.12);
  --line-2: rgba(85, 67, 50, 0.22);
  --line-3: rgba(85, 67, 50, 0.34);
  --fg-0: #2c1e10;
  --fg-1: #5a4530;
  --fg-2: #8b7456;
  --fg-3: #ad9876;
  --accent: #b45309;
  --on-accent: #ffffff;
  --accent-2: #92400e;
  --accent-dim: rgba(180, 83, 9, 0.1);
  --accent-dim-2: rgba(180, 83, 9, 0.2);
  --ok: #15803d;
  --ok-dim: rgba(21, 128, 61, 0.1);
  --warn: #b45309;
  --warn-dim: rgba(180, 83, 9, 0.1);
  --err: #be123c;
  --err-dim: rgba(190, 18, 60, 0.1);
  --info: #1d4ed8;
  --info-dim: rgba(29, 78, 216, 0.1);
  --magenta: #9d174d;
  --magenta-dim: rgba(157, 23, 77, 0.1);
}
.sc-app.theme-sandstone ::-webkit-scrollbar-thumb { background: rgba(85,67,50,0.22); }
.sc-app.theme-sandstone ::-webkit-scrollbar-thumb:hover { background: rgba(85,67,50,0.4); }

/* ── Angola · Vermelho & Amarelo (faixa superior da bandeira) ─────────── */
.sc-app.theme-angola-vermelho-amarelo {
  --bg-0: #1a0508;
  --bg-1: #2a0a10;
  --bg-2: #3d1018;
  --bg-3: #521620;
  --bg-4: #6b1e2a;
  --line: rgba(255, 204, 0, 0.12);
  --line-2: rgba(255, 204, 0, 0.2);
  --line-3: rgba(255, 204, 0, 0.32);
  --fg-0: #fff8f0;
  --fg-1: #ffd4c4;
  --fg-2: #c4938a;
  --fg-3: #8a5a52;
  --accent: #ffcc00;
  --accent-2: #e6b800;
  --on-accent: #1a0508;
  --accent-dim: rgba(255, 204, 0, 0.16);
  --accent-dim-2: rgba(255, 204, 0, 0.28);
  --ok: #ffcc00;
  --ok-dim: rgba(255, 204, 0, 0.14);
  --warn: #ffb020;
  --warn-dim: rgba(255, 176, 32, 0.14);
  --err: #ff6b7a;
  --err-dim: rgba(255, 107, 122, 0.16);
  --info: #ffd966;
  --info-dim: rgba(255, 217, 102, 0.14);
  --magenta: #ce1126;
  --magenta-dim: rgba(206, 17, 38, 0.18);
  --nav-active-fg: #ffcc00;
  --nav-active-bg: rgba(255, 204, 0, 0.14);
}

/* ── Angola · Amarelo & Preto (ouro + tipografia preta, acento vermelho) ─ */
.sc-app.theme-angola-amarelo-preto {
  --bg-0: #fff8e0;
  --bg-1: #ffefb8;
  --bg-2: #ffe88a;
  --bg-3: #ffdf66;
  --bg-4: #f5d040;
  --line: rgba(0, 0, 0, 0.1);
  --line-2: rgba(0, 0, 0, 0.16);
  --line-3: rgba(0, 0, 0, 0.24);
  --fg-0: #0a0a0a;
  --fg-1: #1f1f1f;
  --fg-2: #404040;
  --fg-3: #666666;
  --accent: #ce1126;
  --accent-2: #a50e1e;
  --on-accent: #ffffff;
  --nav-active-fg: #0a0a0a;
  --nav-active-bg: rgba(0, 0, 0, 0.1);
  --accent-dim: rgba(206, 17, 38, 0.12);
  --accent-dim-2: rgba(206, 17, 38, 0.2);
  --ok: #15803d;
  --ok-dim: rgba(21, 128, 61, 0.12);
  --warn: #b45309;
  --warn-dim: rgba(180, 83, 9, 0.12);
  --err: #ce1126;
  --err-dim: rgba(206, 17, 38, 0.12);
  --info: #1d4ed8;
  --info-dim: rgba(29, 78, 216, 0.1);
  --magenta: #0a0a0a;
  --magenta-dim: rgba(0, 0, 0, 0.08);
}
.sc-app.theme-angola-amarelo-preto ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }
.sc-app.theme-angola-amarelo-preto ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.34); }

/* ── Angola · Vermelho & Branco (modo claro — bandeira simplificada) ─── */
.sc-app.theme-angola-vermelho-branco {
  --bg-0: #ffffff;
  --bg-1: #fffafa;
  --bg-2: #fff5f5;
  --bg-3: #ffecec;
  --bg-4: #ffe0e0;
  --line: rgba(206, 17, 38, 0.12);
  --line-2: rgba(206, 17, 38, 0.2);
  --line-3: rgba(206, 17, 38, 0.32);
  --fg-0: #0a0a0a;
  --fg-1: #1a1a1a;
  --fg-2: #333333;
  --fg-3: #555555;
  --accent: #ce1126;
  --accent-2: #a50e1e;
  --on-accent: #ffffff;
  --nav-active-fg: #ce1126;
  --nav-active-bg: rgba(206, 17, 38, 0.1);
  --accent-dim: rgba(206, 17, 38, 0.1);
  --accent-dim-2: rgba(206, 17, 38, 0.18);
  --ok: #15803d;
  --ok-dim: rgba(21, 128, 61, 0.12);
  --warn: #b45309;
  --warn-dim: rgba(180, 83, 9, 0.12);
  --err: #ce1126;
  --err-dim: rgba(206, 17, 38, 0.12);
  --info: #1d4ed8;
  --info-dim: rgba(29, 78, 216, 0.1);
  --magenta: #ce1126;
  --magenta-dim: rgba(206, 17, 38, 0.1);
}
.sc-app.theme-angola-vermelho-branco ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); }
.sc-app.theme-angola-vermelho-branco ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

/* ── Angola · Preto & Vermelho (faixa inferior da bandeira) ───────────── */
.sc-app.theme-angola-preto-vermelho {
  --bg-0: #0a0a0a;
  --bg-1: #111111;
  --bg-2: #1a1a1a;
  --bg-3: #242424;
  --bg-4: #2e2e2e;
  --line: rgba(206, 17, 38, 0.14);
  --line-2: rgba(206, 17, 38, 0.22);
  --line-3: rgba(206, 17, 38, 0.34);
  --fg-0: #f5f5f5;
  --fg-1: #e8e8e8;
  --fg-2: #c4c4c4;
  --fg-3: #a3a3a3;
  --accent: #ce1126;
  --accent-2: #a50e1e;
  --accent-fg: #ff8a96;
  --on-accent: #ffffff;
  --accent-dim: rgba(206, 17, 38, 0.18);
  --accent-dim-2: rgba(206, 17, 38, 0.3);
  --ok: #ffcc00;
  --ok-dim: rgba(255, 204, 0, 0.14);
  --warn: #ffcc00;
  --warn-dim: rgba(255, 204, 0, 0.14);
  --err: #ff4757;
  --err-dim: rgba(255, 71, 87, 0.16);
  --info: #fca5a5;
  --info-dim: rgba(252, 165, 165, 0.14);
  --magenta: #ffcc00;
  --magenta-dim: rgba(255, 204, 0, 0.14);
  --nav-active-fg: #ffcc00;
  --nav-active-bg: rgba(206, 17, 38, 0.2);
}

.sc-app.theme-angola-amarelo-preto.v3-app .btn.primary,
.sc-app.theme-angola-amarelo-preto .v3-app .btn.primary {
  background: linear-gradient(135deg, #ce1126, #a50e1e);
  color: #ffffff;
  border-color: transparent;
}

.sc-app.theme-angola-vermelho-branco.v3-app .btn.primary,
.sc-app.theme-angola-vermelho-branco .v3-app .btn.primary {
  background: linear-gradient(135deg, #ce1126, #a50e1e);
  color: #ffffff;
  border-color: transparent;
}

.sc-app.theme-angola-vermelho-amarelo.v3-app .btn.primary,
.sc-app.theme-angola-vermelho-amarelo .v3-app .btn.primary {
  background: linear-gradient(135deg, #ffcc00, #e6b800);
  color: #1a0508;
  border-color: transparent;
}

.sc-app.theme-angola-preto-vermelho.v3-app .btn.primary,
.sc-app.theme-angola-preto-vermelho .v3-app .btn.primary {
  background: linear-gradient(135deg, #ce1126, #a50e1e);
  color: #ffffff;
  border-color: transparent;
}

/* Angola Preto & Vermelho — tipografia sempre clara (nunca preto sobre preto) */
.sc-app.theme-angola-preto-vermelho,
.sc-app.theme-angola-preto-vermelho.v3-app {
  color: var(--fg-0);
}
.sc-app.theme-angola-preto-vermelho .v3-pill > button.active {
  background: var(--bg-3);
  color: var(--fg-0);
  border: 1px solid var(--line-2);
}
.sc-app.theme-angola-preto-vermelho .card-head h3 {
  color: var(--fg-1);
}

/* ── Modern chrome refinements (used by v3) ──────────────────────────── */
.v3-app {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.18);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.22);
  --shadow-lg: 0 14px 40px rgba(0,0,0,0.35);
}
.v3-app.theme-angola-amarelo-preto {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.16);
}
.v3-app.theme-angola-vermelho-branco {
  --shadow-sm: 0 1px 2px rgba(206, 17, 38, 0.06);
  --shadow-md: 0 4px 12px rgba(206, 17, 38, 0.1);
  --shadow-lg: 0 14px 40px rgba(206, 17, 38, 0.14);
}
.v3-app.theme-daylight {
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.1);
  --shadow-lg: 0 14px 40px rgba(16,24,40,0.14);
}
.v3-app .card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.v3-app .card:hover { border-color: var(--line-2); }
.v3-app .btn {
  border-radius: 8px;
  transition: background .14s, border-color .14s, transform .08s;
}
.v3-app .btn:active { transform: translateY(1px); }
.v3-app .btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--on-accent);
}
.v3-app .input { border-radius: 8px; transition: border-color .14s, box-shadow .14s; }
.v3-app .chip { border-radius: 999px; padding: 3px 9px; }
.v3-app .modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.v3-app .tbl th { font-size: 10.5px; }
.v3-app .tbl tr:hover td { background: var(--bg-2); transition: background .1s; }

/* Pill-style segmented control */
.v3-pill {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--line);
  gap: 1px;
}
.v3-pill > button {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--fg-2);
  white-space: nowrap;
  transition: background .14s, color .14s;
}
.v3-pill > button.active {
  background: var(--bg-1);
  color: var(--fg-0);
  box-shadow: var(--shadow-sm);
}
.v3-app.theme-daylight .v3-pill > button.active { background: #fff; }

/* Soft KPI card with subtle gradient accent stripe */
.v3-kpi {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.v3-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 60%);
  opacity: 0.5;
}

/* Active tab indicator (sliding) */
.v3-tabbar {
  display: flex;
  gap: 4px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  position: relative;
}
.v3-tab {
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--fg-2);
  position: relative;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color .14s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.v3-tab:hover { color: var(--fg-1); }
.v3-tab.active { color: var(--fg-0); font-weight: 500; }
.v3-tab.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* Glass overlay for modals & palettes */
.v3-app .modal-back { backdrop-filter: blur(8px); background: rgba(0,0,0,0.45); }
.v3-app.theme-daylight .modal-back { background: rgba(16,24,40,0.18); }

/* Hover lift for clickable rows / cards */
.v3-hover {
  transition: background .12s, border-color .12s, transform .12s;
  cursor: pointer;
}
.v3-hover:hover { background: var(--bg-2); }

/* Sidebar nav modern style */
.v3-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  margin: 1px 6px;
  font-size: 12.5px;
  color: var(--fg-1);
  cursor: pointer;
  border: none;
  background: transparent;
  width: calc(100% - 12px);
  text-align: left;
  transition: background .12s, color .12s;
}
.v3-side-item:hover { background: var(--bg-2); color: var(--fg-0); }
.v3-side-item.active {
  background: var(--nav-active-bg, var(--accent-dim));
  color: var(--nav-active-fg, var(--accent));
  font-weight: 500;
}
.v3-side-item.active > .v3-side-icon { color: var(--nav-active-fg, var(--accent)); }
.v3-side-icon { color: var(--fg-3); flex: none; display: inline-flex; }

/* Soft separator label */
.v3-sec-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  padding: 14px 16px 6px;
  font-weight: 500;
}

/* Animated entrance */
@keyframes v3fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.v3-fade-up { animation: v3fadeUp .2s ease-out; }

/* Dot-grid bg for hero / empty states */
.v3-grid-bg {
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── Density modes ────────────────────────────────────────────────────── */
.sc-app.density-comfortable .tbl th,
.sc-app.density-comfortable .tbl td { padding: 12px 16px; font-size: 13px; }
.sc-app.density-comfortable .card-head { padding: 14px 18px; }
.sc-app.density-comfortable .card-body { padding: 18px; }
.sc-app.density-comfortable .btn { padding: 8px 13px; }
.sc-app.density-comfortable .btn.sm { padding: 5px 10px; }

.sc-app.density-compact .tbl th,
.sc-app.density-compact .tbl td { padding: 8px 12px; font-size: 12px; }

.sc-app.density-dense .tbl th,
.sc-app.density-dense .tbl td { padding: 4px 10px; font-size: 11px; }
.sc-app.density-dense .card-head { padding: 6px 12px; }
.sc-app.density-dense .card-body { padding: 10px; }
.sc-app.density-dense .btn { padding: 4px 9px; font-size: 11px; }
.sc-app.density-dense .btn.sm { padding: 2px 6px; font-size: 10px; }
.sc-app.density-dense .chip { padding: 1px 6px; }

/* No-animation mode */
.sc-app.no-anim *,
.sc-app.no-anim *::before,
.sc-app.no-anim *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ── v4 shell: topbar + page headers responsivos ───────────────────────── */
.v4-topbar {
  flex-wrap: wrap;
  height: auto !important;
  min-height: 60px;
  padding: 8px 12px !important;
  gap: 10px !important;
  row-gap: 8px;
}
.v4-topbar-search {
  flex: 1 1 180px;
  min-width: 0 !important;
  max-width: 100%;
}
@media (min-width: 900px) {
  .v4-topbar-search { max-width: 420px; }
}
.v4-topbar-grow { flex: 1 1 24px; min-width: 8px; }
.v4-topbar-user-text { display: block; }
.v4-topbar-search-hint { flex: 1; }
.v4-topbar-search-kbd { display: inline-flex; }
@media (max-width: 768px) {
  .v4-topbar-user-text { display: none; }
  .v4-topbar-search-hint { display: none; }
  .v4-topbar-search-kbd { display: none; }
}
.v4-breadcrumb-bar {
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  height: auto !important;
}
.v4-breadcrumb-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.v4-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.v4-page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.v4-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  padding: 0 16px 12px;
}
.v4-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.v4-deploy-apps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.v4-deploy-app-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 148px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.v4-deploy-app-card:hover {
  border-color: var(--line-2);
  background: var(--bg-2);
}
.v4-template-card {
  padding: 14px;
  cursor: pointer;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.v4-template-card:hover {
  border-color: var(--line-2);
  background: var(--bg-2);
}
@media (max-width: 900px) {
  .v3-act-rail { display: none !important; }
}

/* Modo claro / escuro — contraste legível em todo o chrome v4 */
.sc-app.theme-mode-light {
  color-scheme: light;
  color: var(--fg-0);
}
.sc-app.theme-mode-dark {
  color-scheme: dark;
  color: var(--fg-0);
}
.sc-app.theme-mode-light h1,
.sc-app.theme-mode-light h2,
.sc-app.theme-mode-light h3,
.sc-app.theme-mode-light .card-head h3 {
  color: var(--fg-0);
}
.sc-app.theme-mode-dark h1,
.sc-app.theme-mode-dark h2,
.sc-app.theme-mode-dark h3,
.sc-app.theme-mode-dark .card-head h3 {
  color: var(--fg-0);
}
.sc-app.theme-mode-light .input {
  background: var(--bg-1);
  color: var(--fg-0);
  border-color: var(--line-2);
}
.sc-app.theme-mode-dark .input {
  background: var(--bg-2);
  color: var(--fg-0);
  border-color: var(--line-2);
}
.sc-app.theme-mode-light .input input,
.sc-app.theme-mode-dark .input input,
.sc-app.theme-mode-light select.btn,
.sc-app.theme-mode-dark select.btn {
  color: var(--fg-0);
}
.sc-app.theme-mode-light .dim {
  color: var(--fg-3);
}
.sc-app.theme-mode-dark .dim {
  color: var(--fg-3);
}
.sc-app.theme-mode-light .chip:not(.ok):not(.warn):not(.err):not(.info):not(.accent):not(.mag) {
  color: var(--fg-1);
  background: var(--bg-2);
}
.sc-app.theme-mode-dark .chip:not(.ok):not(.warn):not(.err):not(.info):not(.accent):not(.mag) {
  color: var(--fg-1);
  background: var(--bg-2);
}

/* v4 layouts responsivos (Definições, Deploy, cards…) */
@media (max-width: 768px) {
  .v4-form-grid {
    grid-template-columns: 1fr !important;
  }
  .v4-card-grid {
    grid-template-columns: 1fr;
  }
  .v4-deploy-apps-grid {
    grid-template-columns: 1fr;
  }
  .v4-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .v4-page-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .v4-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 12px 12px;
  }
  .sc-app .card-body:has(.tbl),
  .sc-app .card-body .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sc-app .tbl {
    min-width: 520px;
  }
}
@media (max-width: 480px) {
  .v4-kpi-grid {
    grid-template-columns: 1fr;
  }
  .sc-app.density-dense .v4-page-header {
    padding: 10px 12px;
  }
}

/* ── v4 footer (StatusBar) responsivo ─────────────────────────────────── */
.v4-status-bar {
  border-top: 1px solid var(--line);
  background: var(--bg-0);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  gap: 6px 12px;
  min-height: 24px;
  height: auto;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  flex: none;
  color: var(--fg-0);
}
.v4-status-bar-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex: 1 1 200px;
  min-width: 0;
}
.v4-status-bar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
  flex: 1 1 140px;
  min-width: 0;
}
.v4-status-item {
  white-space: nowrap;
}
.v4-status-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.v4-status-sep {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.55;
}
@media (max-width: 768px) {
  .v4-status-bar {
    padding: 8px 10px;
    gap: 8px;
  }
  .v4-status-bar-meta {
    flex: 1 1 100%;
    justify-content: flex-start;
    border-top: 1px dashed var(--line);
    padding-top: 6px;
    margin-top: 2px;
  }
  .v4-status-meta {
    white-space: normal;
    word-break: break-word;
    font-size: 10px;
  }
  .v4-status-hide-sm {
    display: none !important;
  }
}
@media (max-width: 540px) {
  .v4-status-bar-primary {
    flex: 1 1 100%;
    gap: 4px 8px;
  }
  .v4-status-sep {
    display: none;
  }
  .v4-status-hide-xs {
    display: none !important;
  }
  .v4-status-item {
    font-size: 10px;
  }
}
.sc-app.density-dense .v4-status-bar {
  padding: 4px 10px;
  min-height: 22px;
  font-size: 10px;
  gap: 4px 8px;
}
.sc-app.density-comfortable .v4-status-bar {
  padding: 8px 14px;
  min-height: 28px;
  font-size: 12px;
}