/* ============================================================
   FlowZen Admin — Design System Premium (Consolidado)
   Versão limpa: uma única fonte de variáveis, sem overrides duplicados.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Variáveis consolidadas (valores finais) ── */
:root {
  --bg:    #08080b;
  --surf:  #111116;
  --surf2: #191922;
  --bord:  #29293a;
  --bord2: #3a3a50;
  --acc:   #ae6ff0;
  --acc2:  #d96eea;
  --acc3:  #7b50dd;
  --green: #4ade80;
  --red:   #f87171;
  --yel:   #fbbf24;
  --blue:  #60a5fa;
  --orange:#fb923c;
  --text:  #ececf5;
  --muted: #8a8aa3;
  --r:     16px;
  --glow-acc:   0 0 14px rgba(192,132,252,.09);
  --glow-green: 0 0 11px rgba(74,222,128,.075);
  --shadow-card: 0 8px 28px rgba(0,0,0,.42), 0 1px 4px rgba(0,0,0,.28);
  --shadow-lift: 0 16px 46px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
  font-family: 'DM Sans', sans-serif;
  background:
    radial-gradient(circle at 82% 4%, rgba(192,132,252,.12), transparent 34%),
    radial-gradient(circle at 0% 44%, rgba(232,121,249,.075), transparent 24%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain texture sutil */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .3;
}

h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
h3 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}

input, select, textarea {
  width: 100%;
  background: var(--surf2);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 10px 13px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
input:hover, select:hover { border-color: var(--bord2); }
textarea { min-height: 96px; resize: vertical; font-family: 'DM Mono', monospace; font-size: 12px; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(174,111,240,.7);
  box-shadow: 0 0 0 3px rgba(174,111,240,.11), var(--glow-acc);
}
input::placeholder, textarea::placeholder { color: rgba(138,138,163,.6); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(41,41,58,.8); font-size: 12.5px; }
th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; background: rgba(255,255,255,.018); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(192,132,252,.026); }
tr:last-child td { border-bottom: 0; }

/* ── Layout ── */
html, body { height: 100%; overflow: hidden; }
.layout { display: flex; height: 100vh; min-height: 100vh; overflow: hidden; position: relative; z-index: 1; background: transparent; }

/* ── Sidebar ── */
.sidebar {
  width: 242px;
  background: linear-gradient(180deg, rgba(14,14,20,.98) 0%, rgba(10,10,15,.98) 100%);
  border-right: 1px solid rgba(41,41,58,.9);
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 3;
  box-shadow: 12px 0 38px rgba(0,0,0,.32);
  scrollbar-width: thin;
  scrollbar-color: rgba(41,41,58,.9) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(58,58,80,.9); border-radius: 2px; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 18px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid rgba(41,41,58,.7);
}

/* ── Logo ── */
.logo { display: flex; align-items: center; gap: 11px; padding: 0 18px 18px; border-bottom: 1px solid rgba(41,41,58,.8); margin-bottom: 14px; }
.logo-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(192,132,252,.15), 0 0 0 1px rgba(192,132,252,.09);
  flex-shrink: 0;
}
.logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.logo-text { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.logo-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── Status Pill ── */
.status-pill {
  margin: 0 12px 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(74,222,128,.07);
  border: 1px solid rgba(74,222,128,.18);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--green);
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px rgba(74,222,128,.65);
  flex-shrink: 0;
  animation: pulse 2.5s ease infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 7px rgba(74,222,128,.65); }
  50%       { opacity: .55; box-shadow: 0 0 3px rgba(74,222,128,.28); }
}

/* ── Nav ── */
.nav { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 14px; }

.nav-group { border: 1px solid transparent; border-radius: 13px; overflow: hidden; transition: background .18s, border-color .18s; }
.nav-group.open { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.055); }

.nav-group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: transparent; border: 0; color: var(--muted);
  padding: 9px 12px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; transition: background .15s, color .15s;
  text-align: left;
}
.nav-group-toggle:hover { background: var(--surf2); color: var(--text); }
.nav-group.open .nav-group-toggle { color: rgba(236,236,245,.85); background: rgba(174,111,240,.055); }
.nav-group-toggle:focus-visible { outline: 2px solid rgba(174,111,240,.6); outline-offset: 2px; border-radius: 10px; }

.nav-group-left { display: flex; align-items: center; gap: 0; min-width: 0; }
.nav-group-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--acc); opacity: .9; flex-shrink: 0; }
.nav-group-icon svg { width: 18px; height: 18px; display: block; }

.nav-chevron { font-size: 16px; line-height: 1; color: var(--muted); transition: transform .2s cubic-bezier(.4,0,.2,1); transform: rotate(-90deg); }
.nav-group.open .nav-chevron { transform: rotate(0deg); color: var(--acc); }

.nav-group-content { display: none; padding: 2px 6px 8px; }
.nav-group.open .nav-group-content { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px 9px 12px;
  cursor: pointer; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  transition: background .14s, color .14s, transform .14s;
  user-select: none;
}
.nav-item:hover { background: rgba(255,255,255,.04); color: rgba(236,236,245,.9); transform: translateX(1px); }
.nav-group-content .nav-item.active {
  background: linear-gradient(90deg, rgba(174,111,240,.135), rgba(174,111,240,.026));
  color: var(--acc);
  box-shadow: inset 3px 0 0 var(--acc), 0 6px 18px rgba(0,0,0,.08);
  font-weight: 700;
}

.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex-shrink: 0; font-size: 0; color: currentColor; opacity: .8; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-icon svg { width: 17px; height: 17px; display: block; }

.nav-top-item { margin-bottom: 8px; }
.nav-dashboard {
  margin: 2px 0 8px;
  background: linear-gradient(135deg, rgba(192,132,252,.105), rgba(96,165,250,.0525));
  border: 1px solid rgba(192,132,252,.165);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  color: rgba(236,236,245,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.nav-dashboard:hover { background: linear-gradient(135deg, rgba(192,132,252,.165), rgba(96,165,250,.09)); color: var(--text); transform: none; }

.nav-item-double { align-items: center; }
.nav-text-stack { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.nav-text-main { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.nav-text-sub { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.nav-item.active .nav-text-sub, .nav-item:hover .nav-text-sub { color: inherit; opacity: .75; }
.nav-section-title { display: none !important; }

/* First nav group (Dashboard) */
.nav .nav-group:first-child.open { background: rgba(255,255,255,.022); border-color: rgba(41,41,58,.9); }
.nav .nav-group:first-child.open .nav-group-toggle { color: var(--text); background: rgba(174,111,240,.055); }
.nav .nav-group:first-child.open .nav-chevron { color: var(--acc); }
.nav .nav-group:first-child .nav-group-content .nav-item.active { background: transparent; color: var(--muted); box-shadow: none; }
.nav .nav-group:first-child .nav-group-content .nav-item.active:hover { background: rgba(255,255,255,.04); color: var(--text); }

/* ── Main ── */
.main {
  flex: 1; overflow-y: auto; height: 100vh;
  padding: 28px 30px;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,0));
  scrollbar-width: thin;
  scrollbar-color: rgba(58,58,80,.8) transparent;
  position: relative; z-index: 1;
}
.main::-webkit-scrollbar { width: 5px; }
.main::-webkit-scrollbar-thumb { background: rgba(58,58,80,.9); border-radius: 3px; }

.page { display: none; }
.page.active { display: block; animation: flowzenPageIn .18s ease-out; }
@keyframes flowzenPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Subtitles ── */
.subtitle { font-size: 13px; color: var(--muted); margin-bottom: 22px; line-height: 1.65; }

/* ── Cards ── */
.cards, .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.cards-grid.compact { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.card {
  position: relative; overflow: hidden;
  min-height: 136px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    linear-gradient(160deg, var(--surf), rgba(20,20,27,.94));
  border: 1px solid rgba(255,255,255,.065);
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .18s cubic-bezier(.4,0,.2,1), border-color .18s, box-shadow .18s;
}
.card::before {
  content: '';
  position: absolute; left: 18px; top: 0;
  width: 50px; height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(174,111,240,.82), rgba(192,132,252,0));
  pointer-events: none;
}
.card::after {
  content: '';
  position: absolute; right: -30px; top: -30px;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(192,132,252,.0825), rgba(192,132,252,0) 68%);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(192,132,252,.165);
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.04);
}
.card-label { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: rgba(138,138,163,.96); font-weight: 800; margin-bottom: 8px; position: relative; z-index: 1; }
.card-value { font-size: 30px; font-weight: 850; letter-spacing: -.035em; line-height: 1.05; position: relative; z-index: 1; }
.card p.mini-help { position: relative; z-index: 1; margin-top: auto; }
.cards-grid .card-value.text-md { font-size: 24px !important; line-height: 1.25; word-break: break-word; }

/* ── Panel ── */
.panel {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.034), rgba(255,255,255,.014)), var(--surf);
  border: 1px solid rgba(255,255,255,.065);
  border-radius: var(--r);
  padding: 20px 22px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.03);
}
.panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,.135), transparent);
  border-radius: var(--r) var(--r) 0 0;
  pointer-events: none;
}
.panel h3 { margin: 0 0 4px; }
.panel-subtle { background: rgba(25,25,34,.85); border: 1px solid rgba(41,41,58,.85); border-radius: 12px; padding: 16px 18px; }

/* ── Table ── */
.table-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--surf);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.table-wrap { overflow: auto; }
.table-wrap table { min-width: 720px; }
.panel .table-wrap { max-height: 520px; }

/* ── Grid rows ── */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.row > *, .cards > *, .cards-grid > * { min-width: 0; }
.row.three { grid-template-columns: 1fr 1fr 1fr; }
.row.single { grid-template-columns: 1fr; }
.finance-main-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.finance-page-row { align-items: start; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mini-help { font-size: 12px; color: var(--muted); line-height: 1.65; }
.hidden { display: none !important; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border: 0; border-radius: 10px;
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
  transition: all .18s cubic-bezier(.4,0,.2,1); letter-spacing: .01em; white-space: nowrap;
}
.btn:active { transform: scale(.97) !important; }

.btn-primary {
  background: linear-gradient(135deg, rgba(174,111,240,.88), rgba(123,80,221,.88));
  color: rgba(240,230,255,.95);
  box-shadow: 0 8px 18px rgba(139,92,246,.165), inset 0 1px 0 rgba(255,255,255,.135);
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(217,110,234,.88), rgba(123,80,221,.88));
  box-shadow: 0 10px 22px rgba(139,92,246,.21);
  transform: translateY(-1px);
}
.btn-ghost {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(192,132,252,.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.btn-danger { background: rgba(248,113,113,.1); color: var(--red); border: 1px solid rgba(248,113,113,.22); }
.btn-danger:hover { background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.38); }
.btn-success { background: rgba(74,222,128,.1); color: var(--green); border: 1px solid rgba(74,222,128,.22); }
.btn-success:hover { background: rgba(74,222,128,.18); }
.btn-sm { padding: 6px 11px; font-size: 11px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.badge.green  { background: rgba(74,222,128,.1);  color: var(--green);  border: 1px solid rgba(74,222,128,.2);  }
.badge.yel    { background: rgba(251,191,36,.1);   color: var(--yel);    border: 1px solid rgba(251,191,36,.2);   }
.badge.acc    { background: rgba(192,132,252,.1);  color: var(--acc);    border: 1px solid rgba(192,132,252,.2);  }
.badge.danger { background: rgba(248,113,113,.1);  color: var(--red);    border: 1px solid rgba(248,113,113,.2);  }
.badge.red    { background: rgba(248,113,113,.1);  color: var(--red);    border: 1px solid rgba(248,113,113,.2);  }

/* ── Status boxes ── */
.status-box { padding: 12px 14px; border-radius: 11px; border: 1px solid var(--bord); background: rgba(20,20,28,.7); font-size: 12px; white-space: pre-wrap; font-family: 'DM Mono', monospace; line-height: 1.65; color: var(--muted); }
.status-box.ok   { border-color: rgba(74,222,128,.25);  color: var(--green); background: rgba(74,222,128,.04);  }
.status-box.warn { border-color: rgba(251,191,36,.25);   color: var(--yel);   background: rgba(251,191,36,.04);   }
.status-box.err  { border-color: rgba(248,113,113,.25);  color: var(--red);   background: rgba(248,113,113,.04);  }

/* ── Token overlay ── */
.token-overlay {
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 82% 20%, rgba(232,121,249,.24), transparent 28%),
    radial-gradient(circle at 4% 76%, rgba(248,113,113,.15), transparent 28%),
    rgba(5,5,8,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center; z-index: 99;
}
.token-box {
  width: 390px;
  background: linear-gradient(160deg, rgba(22,22,30,.98), rgba(16,16,22,.98));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 36px;
  text-align: center;
  box-shadow: 0 36px 96px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.035) inset;
}
.token-box p { color: var(--muted); font-size: 13px; margin: 8px 0 22px; line-height: 1.6; }
.token-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--acc); }
.token-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Toast ── */
.toast-wrap { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 999; }
.toast {
  padding: 12px 18px; border-radius: 12px;
  background: rgba(18,18,26,.96); border: 1px solid rgba(58,58,80,.9);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: toastIn .2s cubic-bezier(.4,0,.2,1);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.toast.ok   { border-color: rgba(74,222,128,.35);  color: var(--green); }
.toast.err  { border-color: rgba(248,113,113,.35);  color: var(--red);   }
.toast.info { border-color: rgba(192,132,252,.26);  color: var(--acc);   }

/* ── Flow editor ── */
.step-card { background: var(--surf2); border: 1px solid rgba(41,41,58,.9); border-radius: 13px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: box-shadow .18s; }
.step-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.38); }
.step-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(41,41,58,.9); background: rgba(255,255,255,.02); }
.step-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(174,111,240,.14); color: var(--acc); font-size: 11px; font-weight: 800; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(174,111,240,.2); }
.step-title { flex: 1; font-weight: 700; font-size: 12.5px; }
.step-body { padding: 14px; }

.tabbar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tab { padding: 7px 13px; border-radius: 999px; background: transparent; border: 1px solid var(--bord); color: var(--muted); font-weight: 700; font-size: 12px; cursor: pointer; transition: all .15s; }
.tab:hover { border-color: var(--bord2); color: var(--text); }
.tab.active { background: rgba(174,111,240,.12); border-color: rgba(174,111,240,.4); color: var(--acc); }

/* ── Media ── */
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.media-item { background: var(--surf2); border: 1px solid rgba(41,41,58,.9); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; transition: border-color .15s, transform .15s; }
.media-item:hover { border-color: var(--bord2); transform: translateY(-1px); }
.media-name { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text); word-break: break-all; }

/* ── Color utilities ── */
.green { color: var(--green); } .acc { color: var(--acc); } .yel { color: var(--yel); }
.red { color: var(--red); } .blue { color: var(--blue); } .orange { color: var(--orange); }
.ok { color: var(--green); } .warn { color: var(--yel); }

/* ── Utility classes ── */
.w-full{width:100%} .flex{display:flex} .flex-wrap{flex-wrap:wrap}
.justify-center{justify-content:center} .justify-between{justify-content:space-between}
.items-center{align-items:center} .items-end{align-items:flex-end} .items-start{align-items:flex-start}
.font-mono{font-family:'DM Mono',monospace} .font-bold{font-weight:700}
.text-main{color:var(--text)} .text-muted{color:var(--muted)} .text-center{text-align:center} .text-right{text-align:right}
.text-sm{font-size:12px} .text-md{font-size:16px!important;line-height:1.35} .text-xl{font-size:38px}
.textarea-md{min-height:110px} .opacity-soft{opacity:.75}
.mt-10{margin-top:10px} .mt-xs{margin-top:6px} .mt-sm{margin-top:12px} .mt-md{margin-top:14px} .mt-lg{margin-top:16px} .mt-xl{margin-top:18px}
.mb-xs{margin-bottom:5px} .mb-sm{margin-bottom:4px} .mb-md{margin-bottom:12px} .mb-lg{margin-bottom:14px} .mb-xl{margin-bottom:18px}
.gap-xs{gap:6px} .gap-sm{gap:8px} .gap-md{gap:10px} .gap-lg{gap:12px}
.grid-gap-md{display:grid;gap:12px} .grid-gap-sm{display:grid;gap:8px}
.border-top{border-top:1px solid var(--bord)} .top-border{border-top:1px solid var(--bord)}
.table-clean{width:100%;border-collapse:collapse} .section-sep{border:0;border-top:1px solid var(--bord)}
.pt-md{padding-top:14px} .pt-lg{padding-top:16px} .p-sm{padding:8px}
.my-lg{margin:18px 0} .my-xl{margin:22px 0}

/* ── Dynamic states ── */
.dynamic-empty { color: var(--muted); font-size: 13px; padding: 12px; }
.dynamic-empty-card { color: var(--muted); font-size: 13px; background: linear-gradient(135deg,rgba(174,111,240,.041),rgba(255,255,255,.012)); border: 1px solid rgba(174,111,240,.135); border-radius: 12px; padding: 20px; text-align: center; }
.dynamic-card { background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.16); transition: border-color .15s; }
.dynamic-card:hover { border-color: rgba(255,255,255,.1); }
.dynamic-card-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.dynamic-card-note { font-size: 11px; color: var(--muted); margin-top: 5px; }
.dynamic-body { font-size: 13px; color: var(--text); line-height: 1.55; }

/* ── Channel controls ── */
.check-card { display: flex; align-items: flex-start; gap: 10px; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; padding: 12px 14px; color: var(--text); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0; cursor: pointer; transition: border-color .15s, background .15s; }
.check-card:hover { border-color: rgba(174,111,240,.25); }
.check-card input { width: auto; accent-color: var(--acc); margin-top: 2px; }
.check-card.small { font-size: 12px; padding: 9px 11px; word-break: break-word; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 8px; max-height: 330px; overflow: auto; padding: 2px; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }

/* ── CRM ── */

.crm-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.crm-mini-bars { display: grid; gap: 10px; }
.crm-mini-bar-row { background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 11px 13px; font-size: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.crm-empty-state { border: 1px dashed rgba(255,255,255,.14); border-radius: 14px; padding: 18px; color: var(--muted); background: rgba(255,255,255,.025); display: grid; gap: 6px; }
.crm-empty-state strong { color: var(--txt); font-size: 13px; }
.crm-empty-state span { font-size: 12px; line-height: 1.45; }

.crm-filter-row { display: grid; grid-template-columns: minmax(220px,1fr) minmax(170px,.35fr) minmax(150px,.3fr); gap: 10px; min-width: min(100%,620px); }
.crm-grid { display: grid; grid-template-columns: minmax(520px,1.2fr) minmax(360px,.8fr); gap: 16px; align-items: start; }
.crm-detail { position: sticky; top: 14px; max-height: calc(100vh - 60px); overflow: auto; }
.crm-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.crm-form-section { border-top: 1px solid var(--bord); padding-top: 14px; margin-top: 14px; }
.crm-form-section h4 { font-size: 13px; margin-bottom: 8px; font-weight: 700; }
.crm-action-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crm-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.crm-dashboard-cards .card { min-height: 132px; }

.tag-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: rgba(174,111,240,.1); border: 1px solid rgba(174,111,240,.2); color: var(--acc); font-size: 10px; font-weight: 700; margin: 2px 3px 2px 0; }

.kanban { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 14px; align-items: start; }
.kanban-col { background: linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.012)),var(--surf); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r); padding: 14px; min-height: 180px; box-shadow: var(--shadow-card); }
.kanban-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.kanban-head span { background: var(--surf2); border: 1px solid var(--bord); border-radius: 999px; padding: 2px 8px; color: var(--muted); font-size: 11px; }
.kanban-card { background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; padding: 12px; margin-bottom: 10px; font-size: 12px; transition: border-color .15s, transform .15s; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.16); }
.kanban-card:hover { border-color: rgba(174,111,240,.3); transform: translateY(-1px); }

.timeline { display: flex; flex-direction: column; gap: 12px; }
.timeline-item { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: start; }
.timeline-date { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; padding-top: 10px; }
.timeline-card, .mini-list-item { background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 13px 14px; font-size: 12px; line-height: 1.6; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.mini-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Dashboard grid ── */
.dashboard-grid { display: grid; grid-template-columns: minmax(320px,1fr) minmax(280px,.8fr); gap: 16px; align-items: start; }
.clean-checklist { display: grid; gap: 8px; }
.clean-checklist div, .checklist div {
  background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 11px 14px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,.14); transition: border-color .15s;
}
.clean-checklist div:hover, .checklist div:hover { border-color: rgba(174,111,240,.2); }

/* ── Section icons ── */
.section-icon, .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; vertical-align: middle; color: var(--acc); margin-right: 6px; }
.section-icon svg, .btn-icon svg { width: 18px; height: 18px; display: block; }
.btn-icon { margin-right: 2px; color: currentColor; }
.panel h3 .section-icon { margin-right: 8px; }
.inline-svg-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; vertical-align: -4px; color: currentColor; }
.inline-svg-icon svg { width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Hero panels ── */
.api-hero, .channel-hero, .crm-hero, .v3-hero, .help-hero {
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% -20%, rgba(232,121,249,.18), transparent 36%),
    linear-gradient(135deg, rgba(192,132,252,.0975), rgba(96,165,250,.041), rgba(255,255,255,.012));
  border: 1px solid rgba(192,132,252,.165) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035);
}

/* ── Channel layout ── */
.channel-cards .card { min-height: 132px; }
.channel-layout { display: grid; grid-template-columns: minmax(320px,1.15fr) minmax(300px,.85fr); gap: 16px; align-items: start; }
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.switch-card { align-items: flex-start; gap: 10px; }
.switch-card span { display: flex; flex-direction: column; gap: 4px; line-height: 1.25; }
.switch-card small { font-size: 11px; color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.45; }

/* ── Collapsible panels ── */
.panel-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.panel-head-row h3 { margin: 0 0 4px; }
.collapsible-panel .panel-body { display: block; }
.collapsible-panel.is-collapsed .panel-body,
.collapsible-panel.is-collapsed .panel-collapsible-body { display: none; }
.panel-collapsible-body { display: block; }

/* ── Funnel builder ── */
.funnel-builder-grid { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(320px,1.15fr); gap: 16px; align-items: start; }
.funnel-hub-grid { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(320px,1.15fr); gap: 16px; align-items: start; }
.block-library { display: grid; grid-template-columns: 1fr; gap: 10px; }
.block-type-card { width: 100%; text-align: left; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.014)); color: var(--text); border-radius: 14px; padding: 13px 14px; cursor: pointer; transition: border-color .16s, transform .16s, box-shadow .16s; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.block-type-card:hover { border-color: rgba(174,111,240,.4); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.block-type-card span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.funnel-preview { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.funnel-node { border: 1px solid rgba(174,111,240,.3); background: rgba(174,111,240,.07); border-radius: 15px; padding: 14px; display: flex; flex-direction: column; gap: 5px; }
.funnel-node span { color: var(--muted); font-size: 12px; }
.funnel-arrow { text-align: center; color: var(--acc); font-weight: 900; }
.funnel-branches { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.funnel-branches div { border: 1px solid rgba(255,255,255,.06); background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border-radius: 11px; padding: 10px; text-align: center; font-size: 12px; color: var(--muted); }


.funnel-summary-cards .card { min-height: 126px; }
.funnel-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding-right: 3px; }
.funnel-list-card { width: 100%; border: 1px solid rgba(255,255,255,.065); background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); color: var(--text); border-radius: 14px; padding: 12px 13px; text-align: left; display: grid; gap: 6px; cursor: pointer; transition: border-color .16s, box-shadow .16s, transform .16s; }
.funnel-list-card:hover { border-color: rgba(174,111,240,.36); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.funnel-list-card.selected { border-color: rgba(174,111,240,.68); box-shadow: 0 0 0 2px rgba(174,111,240,.1); background: linear-gradient(145deg,rgba(174,111,240,.115),rgba(255,255,255,.018)); }
.funnel-list-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.builder-choice-card small { color: var(--muted); font-size: 11px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 8px; margin-top: auto; }

.builder-choice-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 12px; }
.builder-choice-card { display: flex; flex-direction: column; text-align: left; gap: 8px; background: linear-gradient(160deg,rgba(174,111,240,.1),rgba(255,255,255,.02)); border: 1px solid rgba(174,111,240,.2); border-radius: 16px; padding: 16px; color: var(--text); cursor: pointer; min-height: 132px; transition: all .18s cubic-bezier(.4,0,.2,1); font-family: inherit; box-shadow: 0 4px 16px rgba(0,0,0,.22); }
.builder-choice-card:hover { transform: translateY(-2px); border-color: rgba(174,111,240,.5); box-shadow: 0 12px 30px rgba(0,0,0,.3), 0 0 14px rgba(174,111,240,.08); }
.builder-choice-card strong { font-size: 14px; color: var(--acc); font-weight: 700; }
.builder-choice-card span { font-size: 12px; color: var(--muted); line-height: 1.55; }

.builder-empty, .help-empty { background: linear-gradient(135deg,rgba(174,111,240,.041),rgba(255,255,255,.012)); border: 1px solid rgba(174,111,240,.135); border-radius: 16px; padding: 24px; text-align: center; color: var(--muted); }
.builder-step { border: 1px solid rgba(255,255,255,.065); background: linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.014)); border-radius: 15px; overflow: hidden; transition: border-color .16s, box-shadow .16s; }
.builder-step.selected { border-color: rgba(174,111,240,.65); box-shadow: 0 0 0 2px rgba(174,111,240,.1); }
.builder-step-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; background: rgba(255,255,255,.015); }
.builder-step-head strong { display: block; font-size: 13px; }
.builder-step-head span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.builder-step-body { border-top: 1px solid rgba(41,41,58,.9); padding: 13px 14px; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.builder-step.is-mini .builder-step-head { opacity: .8; }
.builder-options { display: grid; gap: 8px; margin-top: 8px; }
.builder-option-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; }
.builder-option-row input, .builder-option-row select { margin: 0; }

.collapse-map { display: grid; gap: 10px; }
.collapse-map-item { border: 1px solid rgba(255,255,255,.06); background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border-radius: 13px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 4px 12px rgba(0,0,0,.14); transition: border-color .15s; }
.collapse-map-item:hover { border-color: rgba(255,255,255,.1); }
.collapse-map-item span { font-size: 12px; color: var(--muted); line-height: 1.45; }

.section-title { font-size: 17px; font-weight: 700; margin: 8px 0 6px; letter-spacing: -.01em; }

/* ── Help ── */
.help-hero h3 { font-size: 18px; margin-bottom: 4px; }
.help-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.help-toolbar { display: grid; grid-template-columns: minmax(260px,1fr) auto; gap: 16px; align-items: end; }
.help-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.help-search-wrap { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 220px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 14px; }
.help-card { background: linear-gradient(160deg,rgba(255,255,255,.034),rgba(255,255,255,.014)),var(--surf); border: 1px solid rgba(255,255,255,.065); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 185px; transition: all .2s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-card); }
.help-card:hover { transform: translateY(-3px); border-color: rgba(174,111,240,.3); box-shadow: var(--shadow-lift), 0 0 12px rgba(174,111,240,.075); }
.help-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.help-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(174,111,240,.1); font-size: 20px; flex-shrink: 0; border: 1px solid rgba(174,111,240,.15); }
.help-card h3 { font-size: 15px; line-height: 1.35; margin: 0; font-weight: 700; }
.help-card p { font-size: 12px; line-height: 1.55; color: var(--muted); }
.help-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.help-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: var(--surf2); border: 1px solid var(--bord); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.help-chip.video { color: var(--blue); background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.2); }
.help-chip.pdf { color: var(--red); background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.2); }
.help-chip.doc { color: var(--green); background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.2); }
.help-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.help-modal { position: fixed; inset: 0; display: none; z-index: 120; }
.help-modal.open { display: block; }
.help-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(6px); }
.help-modal-card { position: absolute; inset: 26px; display: flex; flex-direction: column; background: var(--surf); border: 1px solid rgba(174,111,240,.2); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.help-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--bord); }
.help-modal-head h3 { margin: 8px 0 4px; font-size: 18px; }
.help-viewer { flex: 1; background: #060609; min-height: 320px; display: flex; align-items: stretch; justify-content: stretch; }
.help-viewer iframe, .help-viewer video { width: 100%; height: 100%; border: 0; background: #060609; }
.help-viewer video { object-fit: contain; padding: 12px; }
.help-admin-panel .toolbar { align-items: flex-start; }
.help-form-box { border-top: 1px solid var(--bord); margin-top: 14px; padding-top: 16px; }
.help-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.help-card-subtitle { font-size: 11px; color: var(--acc); font-weight: 700; margin-top: 5px; }
.help-card-actions .btn-danger { margin-left: auto; }
.help-tags-line { font-size: 10px; color: var(--muted); line-height: 1.5; margin-top: 4px; }

/* ── Support ── */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 14px; margin-bottom: 18px; }
.support-card { background: linear-gradient(160deg,rgba(255,255,255,.034),rgba(255,255,255,.014)),var(--surf); border: 1px solid rgba(255,255,255,.065); border-radius: var(--r); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; min-height: 165px; box-shadow: var(--shadow-card); transition: all .2s cubic-bezier(.4,0,.2,1); }
.support-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.1); box-shadow: var(--shadow-lift); }
.support-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(174,111,240,.1); border: 1px solid rgba(174,111,240,.2); color: var(--acc); flex-shrink: 0; box-shadow: 0 4px 14px rgba(174,111,240,.12); }
.support-icon svg { width: 20px; height: 20px; display: block; }
.support-card h3 { font-size: 17px; margin: 4px 0 6px; word-break: break-word; font-weight: 700; }
.support-card a.btn { text-decoration: none; }

/* ── API Hub ── */
.api-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 24px; }
.api-hero h2 { font-size: 23px; margin: 4px 0 8px; font-weight: 700; letter-spacing: -.02em; }
.api-hero p { max-width: 760px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.api-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--acc); }
.api-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.api-shell { display: grid; grid-template-columns: minmax(330px,.95fr) minmax(430px,1.35fr); gap: 14px; align-items: start; }
.api-list-panel, .api-config-panel { min-width: 0; }
.api-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.api-chip { border: 1px solid rgba(255,255,255,.065); background: rgba(255,255,255,.028); color: var(--muted); border-radius: 999px; padding: 7px 11px; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; }
.api-chip:hover, .api-chip.active { border-color: rgba(174,111,240,.5); background: rgba(174,111,240,.12); color: var(--acc); }
.api-integration-list { display: flex; flex-direction: column; gap: 10px; max-height: 660px; overflow: auto; padding-right: 4px; }
.api-integration-card {
  width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center;
  text-align: left; border-radius: 17px;
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
  border: 1px solid rgba(255,255,255,.065);
  padding: 13px 14px; color: var(--text); font-family: inherit; cursor: pointer;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.api-integration-card:hover { transform: translateY(-1px); border-color: rgba(174,111,240,.27); background: linear-gradient(135deg,rgba(174,111,240,.06),rgba(255,255,255,.02)); }
.api-integration-card.selected { border-color: rgba(174,111,240,.48); background: linear-gradient(135deg,rgba(174,111,240,.12),rgba(96,165,250,.034),rgba(255,255,255,.018)); box-shadow: inset 3px 0 0 var(--acc), 0 12px 30px rgba(0,0,0,.32); }

.api-card-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg,rgba(174,111,240,.12),rgba(96,165,250,.056)); border: 1px solid rgba(174,111,240,.135); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.18); }
.api-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--text); }
.api-card-icon svg { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.api-card-icon.large { width: 32px; height: 32px; color: #bd86f5; }
.api-card-icon.large svg { width: 30px; height: 30px; }
.api-card-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--red); border: 2px solid var(--surf); box-shadow: 0 0 0 3px rgba(248,113,113,.08); }
.api-card-dot.ok   { background: var(--green); box-shadow: 0 0 0 3px rgba(74,222,128,.075), 0 0 9px rgba(74,222,128,.27); }
.api-card-dot.warn { background: var(--yel);   box-shadow: 0 0 0 3px rgba(251,191,36,.075),  0 0 9px rgba(251,191,36,.195); }
.api-card-content { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.api-card-title { font-size: 13px; font-weight: 700; color: var(--text); }
.api-card-desc { font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.api-card-badges { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; max-width: 110px; }
.api-selected-title { display: flex; align-items: center; gap: 12px; }
.api-selected-title-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.api-selected-title-text small { font-size: 11px; color: var(--muted); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.api-selected-title-text span { font-size: 16px; font-weight: 800; }
.api-meta-strip { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; border-radius: 15px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025); }
.api-meta-strip span { font-size: 11px; color: var(--muted); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); border-radius: 999px; padding: 7px 10px; }
.api-json-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.api-email-card { padding: 14px; border: 1px solid rgba(96,165,250,.2); background: linear-gradient(135deg,rgba(96,165,250,.07),rgba(174,111,240,.04)); border-radius: 13px; }
.api-summary-card { position: relative; overflow: hidden; }
.api-summary-card::after { content: ''; position: absolute; right: -18px; top: -18px; width: 80px; height: 80px; border-radius: 50%; background: rgba(174,111,240,.06); }
.report-bar-row { background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 11px 13px; font-size: 12px; transition: border-color .15s; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.report-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 999px; margin-top: 9px; overflow: hidden; }
.report-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc3), var(--acc2)); border-radius: 999px; box-shadow: 0 0 6px rgba(192,132,252,.30); }

/* ── Mini table ── */
.mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini-table th, .mini-table td { padding: 8px 10px; border-bottom: 1px solid rgba(41,41,58,.7); text-align: left; }
.mini-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; background: rgba(255,255,255,.018); }
.mini-table tbody tr { transition: background .12s; }
.mini-table tbody tr:hover { background: rgba(174,111,240,.04); }

/* ── Misc ── */
.professional-empty { background: linear-gradient(135deg,rgba(174,111,240,.07),rgba(255,255,255,.02)); border-style: solid; }
.professional-empty .btn-group { flex-wrap: wrap; }
.sidebar .nav { padding-bottom: 18px; }

/* Accessibility */
button:focus-visible, .btn:focus-visible, .nav-item:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid rgba(174,111,240,.65); outline-offset: 2px;
}

/* ── Responsive ── */
@media(max-width:1120px) { .api-shell{grid-template-columns:1fr} .api-integration-list{max-height:none} .api-json-grid{grid-template-columns:1fr} }
@media(max-width:1100px) { .dashboard-grid,.crm-grid,.crm-insight-grid{grid-template-columns:1fr} .crm-detail{position:static;max-height:none} .crm-filter-row{grid-template-columns:1fr} }
@media(max-width:1050px) { .channel-layout{grid-template-columns:1fr} .channel-hero{align-items:flex-start} .channel-hero .btn-group{width:100%} }
@media(max-width:1000px) { .funnel-builder-grid,.funnel-hub-grid{grid-template-columns:1fr} .funnel-branches{grid-template-columns:1fr} }
@media(max-width:980px) { .funnel-hub-grid{grid-template-columns:1fr} }
@media(max-width:900px) {
  .layout{flex-direction:column} .sidebar{width:100%;height:auto;position:relative;max-height:48vh} .main{height:auto;min-height:100vh;padding:18px 16px}
  .row,.row.three{grid-template-columns:1fr}
  .nav{max-height:48vh;overflow:auto}
  .nav-group.open .nav-group-content{display:grid;grid-template-columns:1fr 1fr}
  .nav-group-content .nav-item{min-height:40px}
  .help-hero,.help-modal-head{flex-direction:column;align-items:stretch} .help-toolbar{grid-template-columns:1fr} .help-modal-card{inset:12px} .help-viewer{min-height:55vh}
  .support-card{flex-direction:column} .support-grid{grid-template-columns:1fr}
}
@media(max-width:760px) {
  .layout{display:block;overflow:auto} .sidebar{height:auto} .main{height:auto;min-height:100vh}
  .cards,.cards-grid{grid-template-columns:1fr} .token-box{width:min(92vw,380px);padding:24px}
  .btn-group .btn{flex:1;justify-content:center} .panel-head-row{flex-direction:column}
  .api-hero{padding:16px 18px} .api-hero h2{font-size:18px}
  .api-integration-card{grid-template-columns:auto 1fr} .api-card-badges{grid-column:2;justify-content:flex-start;max-width:none}
  .api-json-grid,.row{grid-template-columns:1fr!important}
  .builder-step-head{flex-direction:column;align-items:stretch} .builder-option-row{grid-template-columns:1fr} .builder-option-row .btn{width:100%;justify-content:center}
  .copy-row{grid-template-columns:1fr} .copy-row .btn{justify-content:center}
  .card{min-height:118px}
}
@media(max-width:520px) { .nav-group.open .nav-group-content{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important} }


/* API & Conexões Pro — painel de ações rápidas */
.api-action-panel{
  border:1px solid rgba(192,132,252,.16);
  background:linear-gradient(135deg,rgba(192,132,252,.075),rgba(255,255,255,.02));
  border-radius:16px;
  padding:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.api-action-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.api-action-fields textarea{min-height:92px;resize:vertical}
@media(max-width:820px){.api-action-fields{grid-template-columns:1fr}}

/* FlowZen Dashboard Principal — revisão de produção 2026-05-08 */
.dashboard-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.dashboard-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.badge.local-mode{background:rgba(174,111,240,.12);border:1px solid rgba(174,111,240,.28);color:#d9bbff}.dashboard-status-cards{margin-bottom:16px}.dashboard-kpi-cards{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));margin-bottom:18px}.kpi-card{min-height:142px}.dashboard-skeleton{opacity:.72}.dashboard-hero{margin-top:2px}.dashboard-grid-wide{grid-template-columns:repeat(2,minmax(280px,1fr))}.dashboard-chart-card{min-height:265px}.dashboard-chart-state{min-height:180px;display:flex;flex-direction:column;justify-content:center}.dashboard-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:126px;text-align:center;color:var(--muted);border:1px dashed rgba(174,111,240,.2);border-radius:16px;background:linear-gradient(145deg,rgba(174,111,240,.045),rgba(255,255,255,.012));padding:20px}.dashboard-empty strong{color:var(--text);font-size:13px}.dashboard-empty span{font-size:12px;max-width:360px;line-height:1.5}.dashboard-error{border-color:rgba(248,113,113,.28);background:linear-gradient(145deg,rgba(248,113,113,.06),rgba(255,255,255,.012))}.dashboard-bars{display:flex;flex-direction:column;gap:13px;width:100%}.dashboard-bar-row{display:grid;grid-template-columns:72px 1fr 94px;gap:12px;align-items:center;font-size:12px;color:var(--muted)}.dashboard-bar-row strong{color:var(--text);font-size:12px;text-align:right}.dashboard-bar-track{height:11px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.055);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}.dashboard-bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(174,111,240,.92),rgba(96,165,250,.78));box-shadow:0 0 14px rgba(174,111,240,.16)}.dashboard-bar-track.out i{background:linear-gradient(90deg,rgba(248,113,113,.85),rgba(251,191,36,.7))}.dashboard-finance-pair{display:grid;gap:18px;width:100%}.dashboard-finance-pair div{display:grid;grid-template-columns:90px 128px 1fr;gap:12px;align-items:center}.dashboard-finance-pair span{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.dashboard-finance-pair strong{font-size:17px}.mini-list-item .badge{align-self:center}.green{color:var(--green)!important}.red{color:var(--red)!important}.yel{color:var(--yel)!important}.acc{color:var(--acc)!important}@media(max-width:1100px){.dashboard-grid-wide{grid-template-columns:1fr}.dashboard-title-row{flex-direction:column}.dashboard-actions{justify-content:flex-start}.dashboard-finance-pair div{grid-template-columns:1fr}.dashboard-bar-row{grid-template-columns:58px 1fr 76px}}

/* ── CRM: Tags e Status ── */
.page-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.crm-settings-summary{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:18px}
.crm-settings-panel{max-width:1120px}
.crm-settings-grid{grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.crm-settings-editor{min-width:0}
.crm-settings-textarea{min-height:190px;max-height:340px;background:rgba(9,9,14,.6);border-color:rgba(174,111,240,.14);font-size:13px;line-height:1.7}
.crm-chip-preview{display:flex;gap:8px;flex-wrap:wrap;min-height:46px;margin-top:12px;padding:12px;border:1px dashed rgba(174,111,240,.22);border-radius:14px;background:linear-gradient(145deg,rgba(174,111,240,.045),rgba(255,255,255,.012))}
.tag-pill.muted{opacity:.72;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08)}
.crm-settings-note{display:flex;gap:8px;align-items:flex-start;margin-top:4px;padding:13px 14px;border-radius:14px;background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.16);color:var(--muted);font-size:12px;line-height:1.55}
.crm-settings-note strong{color:var(--text);white-space:nowrap}
@media(max-width:1100px){.page-title-row{flex-direction:column}.crm-settings-grid{grid-template-columns:1fr}.crm-settings-panel{max-width:none}}

/* Vendas / Clientes — visão comercial aprimorada */
.sales-client-header{margin-bottom:18px}.sales-client-header .subtitle{margin-bottom:0}.sales-client-cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.sales-client-card{display:flex;gap:16px;align-items:flex-start;min-height:136px}.sales-client-card-icon{width:46px;height:46px;min-width:46px;border-radius:16px;display:grid;place-items:center;background:rgba(174,111,240,.13);border:1px solid rgba(174,111,240,.23);box-shadow:0 0 24px rgba(174,111,240,.08)}.sales-client-card-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sales-client-card-icon.green{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.22)}.sales-client-card-icon.yel{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.22)}.sales-client-card-icon.danger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.13);color:var(--text)}.sales-client-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px}.sales-client-search{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);border-radius:13px;padding:0 12px;color:var(--muted)}.sales-client-search input{border:0;background:transparent;outline:0;width:100%;height:42px;color:var(--text);font-size:13px}.sales-client-search input::placeholder{color:var(--muted)}.sales-client-filters{display:flex;gap:8px;flex-wrap:wrap}.sales-client-filters .btn.active{color:var(--acc);border-color:rgba(192,132,252,.5);background:rgba(174,111,240,.16);box-shadow:0 0 0 1px rgba(174,111,240,.08) inset}.sales-client-empty{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:28px;color:var(--muted);background:radial-gradient(circle at 50% 0,rgba(174,111,240,.08),transparent 45%)}.sales-client-empty strong{color:var(--text);font-size:18px}.sales-client-empty span{max-width:540px;line-height:1.45;font-size:13px}.sales-client-empty-icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;color:var(--acc);border:1px solid rgba(174,111,240,.22);background:rgba(174,111,240,.08);box-shadow:0 0 28px rgba(174,111,240,.12)}.sales-client-empty-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sales-client-help{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:18px}.sales-client-help>div{border-left:1px solid rgba(255,255,255,.09);padding-left:16px}.sales-client-help>div:first-child{border-left:0;padding-left:0}@media(max-width:1100px){.sales-client-help{grid-template-columns:1fr 1fr}.sales-client-toolbar{align-items:stretch}.sales-client-search{min-width:100%}}@media(max-width:720px){.sales-client-help{grid-template-columns:1fr}.sales-client-help>div{border-left:0;padding-left:0}.sales-client-card{min-height:auto}.sales-client-header .btn{width:100%}}

/* ── Vendas auxiliares: Orçamentos, Comprovantes e Relatórios ── */
.sales-page-header{margin-bottom:18px}.sales-page-header .subtitle{margin-bottom:0}.sales-kpi-card{min-height:142px}.sales-kpi-top{display:flex;gap:16px;align-items:flex-start}.sales-kpi-icon{width:46px;height:46px;min-width:46px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:22px;background:rgba(174,111,240,.13);border:1px solid rgba(174,111,240,.25);box-shadow:0 0 24px rgba(174,111,240,.08)}.sales-kpi-icon.green{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.25);color:var(--green)}.sales-kpi-icon.yel{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.25);color:var(--yel)}.sales-kpi-icon.danger{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.25);color:var(--red)}.sales-card-action{position:relative;z-index:1;width:100%;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.028);color:var(--text);border-radius:12px;padding:10px 12px;text-align:left;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.sales-card-action:hover{border-color:rgba(174,111,240,.35);color:var(--acc)}.sales-two-col{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}.sales-two-col.report-layout{grid-template-columns:minmax(0,1fr) 320px}.sales-budget-panel{min-height:360px}.sales-step-panel{min-height:360px}.sales-step-list{display:grid;gap:18px}.sales-step-list>div{position:relative;padding-left:48px;min-height:58px}.sales-step-list>div+div::before{content:'';position:absolute;left:18px;top:-18px;width:1px;height:18px;border-left:1px dashed rgba(174,111,240,.45)}.sales-step-list span{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:rgba(174,111,240,.18);border:1px solid rgba(174,111,240,.3);color:var(--acc);font-weight:900}.sales-step-list strong{display:block;color:var(--text);font-size:14px;margin-bottom:4px}.sales-step-list p{font-size:12.5px;line-height:1.5;color:var(--muted)}.sales-info-strip{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.028);border-radius:12px;padding:10px 12px;color:var(--muted);font-size:12.5px}.sales-toolbar-inline{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.sales-toolbar-inline select{min-width:160px;width:auto;height:40px;padding:8px 12px}.sales-search{display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);border-radius:12px;padding:0 12px;color:var(--muted)}.sales-search.compact{min-width:260px}.sales-search input{height:40px;border:0;background:transparent;outline:0;color:var(--text);padding:0;width:100%}.sales-warning{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;border:1px solid rgba(251,191,36,.32);background:linear-gradient(135deg,rgba(251,191,36,.105),rgba(251,191,36,.025));border-radius:14px;padding:14px 16px;color:#ffd45d}.sales-warning::before{content:'⚠';font-size:24px;line-height:1}.sales-warning strong{display:block;font-size:12.5px;margin-bottom:4px;color:#ffd45d}.sales-warning span{display:block;color:rgba(255,224,138,.92);line-height:1.45;font-size:12.5px}.sales-empty-state{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;color:var(--muted);padding:30px;background:radial-gradient(circle at 50% 10%,rgba(174,111,240,.09),transparent 48%)}.sales-empty-state strong{color:var(--text);font-size:17px}.sales-empty-state span{max-width:560px;font-size:13px;line-height:1.48}.sales-empty-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:rgba(174,111,240,.1);border:1px solid rgba(174,111,240,.24);color:var(--acc);font-size:28px;box-shadow:0 0 28px rgba(174,111,240,.11)}.sales-side-stack{display:grid;gap:16px}.sales-shortcuts{display:grid;gap:10px}.sales-shortcuts button{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.028);border-radius:13px;padding:13px 14px;color:var(--text);cursor:pointer}.sales-shortcuts button::after{content:'→';grid-row:1/3;grid-column:2;align-self:center;color:var(--muted)}.sales-shortcuts button:hover{border-color:rgba(174,111,240,.36);background:rgba(174,111,240,.1)}.sales-shortcuts span{font-size:12px;color:var(--muted)}.sales-insight-box{border:1px solid rgba(74,222,128,.16);background:rgba(74,222,128,.045);border-radius:13px;padding:14px;color:var(--muted);line-height:1.55;font-size:13px}.proof-kpi-cards,.sales-budget-cards,.sales-report-cards{grid-template-columns:repeat(4,minmax(190px,1fr))}.proof-panel .table-wrap,.sales-report-panel .table-wrap,.sales-budget-panel .table-wrap{margin-top:14px}
@media(max-width:1180px){.sales-two-col,.sales-two-col.report-layout{grid-template-columns:1fr}.sales-toolbar-inline{justify-content:flex-start}.proof-kpi-cards,.sales-budget-cards,.sales-report-cards{grid-template-columns:repeat(2,minmax(190px,1fr))}}
@media(max-width:720px){.proof-kpi-cards,.sales-budget-cards,.sales-report-cards{grid-template-columns:1fr}.sales-toolbar-inline,.sales-toolbar-inline select,.sales-search.compact{width:100%;min-width:100%}.sales-page-header .btn-group,.sales-page-header .btn{width:100%}.sales-kpi-top{gap:12px}.sales-kpi-icon{width:40px;height:40px;min-width:40px}}
.cash-mini-chart{display:flex;flex-direction:column;gap:12px}
.cash-mini-chart>div{display:grid;grid-template-columns:minmax(80px,1fr) auto;gap:10px;align-items:center;position:relative;padding-bottom:14px}
.cash-mini-chart span{color:var(--muted);font-size:.86rem}
.cash-mini-chart strong{font-weight:800}
.cash-mini-chart i{position:absolute;left:0;right:auto;bottom:0;height:7px;min-width:6px;border-radius:999px;background:linear-gradient(90deg,rgba(130,92,255,.65),rgba(62,230,183,.75));box-shadow:0 0 18px rgba(130,92,255,.22)}
.cash-mini-chart>div:nth-child(2) i{background:linear-gradient(90deg,rgba(255,111,145,.65),rgba(255,184,107,.75));box-shadow:0 0 18px rgba(255,111,145,.18)}


.finance-page-row .panel, .finance-primary-row .panel, .finance-ops-row .panel, .finance-entry-row .panel { min-width: 0; }
#receitasMixBox, #despesasMixBox, #financialReportHighlights { gap: 10px; }
#receitasMixBox > div, #despesasMixBox > div, #financialReportHighlights > div { background: linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.06); border-radius: 13px; padding: 12px 14px; }
@media(max-width:1320px){
  .finance-primary-row, .finance-ops-row, .finance-entry-row, .finance-page-row { grid-template-columns: 1fr; }
}

/* Estoque — ajustes de usabilidade e gráficos locais */
.stock-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.stock-toolbar select{width:auto;min-width:180px;height:42px;padding:8px 12px}
.stock-search{display:flex;align-items:center;gap:9px;flex:1;min-width:260px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);border-radius:12px;padding:0 12px;color:var(--muted)}
.stock-search input{height:42px;border:0;background:transparent;outline:0;color:var(--text);padding:0;width:100%}
.stock-chart{min-height:150px}
.stock-bars{display:grid;gap:11px}
.stock-bar-row{position:relative;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:13px;padding:12px 13px 17px;overflow:hidden}
.stock-bar-row div{position:relative;z-index:1;display:flex;justify-content:space-between;gap:10px;align-items:center}
.stock-bar-row strong{font-size:13px;color:var(--text);max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stock-bar-row span{font-size:12px;color:var(--muted);white-space:nowrap}
.stock-bar-row i{position:absolute;left:0;bottom:0;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(130,92,255,.65),rgba(62,230,183,.75));box-shadow:0 0 18px rgba(130,92,255,.2)}
@media(max-width:720px){.stock-toolbar,.stock-toolbar select,.stock-search{width:100%;min-width:100%}.stock-bar-row div{align-items:flex-start;flex-direction:column}.stock-bar-row strong{max-width:100%}}

/* Estoque — subabas ativas */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid label{display:block;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.form-grid input,.form-grid select,.filter-input{width:100%;min-height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);color:var(--text);padding:9px 12px;outline:0}
.form-grid input:focus,.form-grid select:focus,.filter-input:focus{border-color:rgba(174,111,240,.5);box-shadow:0 0 0 3px rgba(174,111,240,.08)}
.filter-input{width:auto;min-width:190px}
.stock-chart-box{min-height:170px;display:flex;flex-direction:column;justify-content:center}
.btn-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:1080px){.grid-2{grid-template-columns:1fr}}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}.filter-input{width:100%;min-width:100%}}

/* Campanhas / Marketing — revisão visual e separação de estimativas */
.campaign-hero{align-items:center;justify-content:space-between;gap:18px}
.campaign-notice{border:1px solid rgba(251,191,36,.3);background:linear-gradient(135deg,rgba(251,191,36,.105),rgba(255,255,255,.018));border-radius:16px;padding:14px 16px;color:rgba(255,236,170,.92);font-size:13px;line-height:1.55}
.campaign-notice strong{color:#ffd56a}
.campaign-kpi-cards{grid-template-columns:repeat(4,minmax(190px,1fr));margin-bottom:18px}
.campaign-kpi-card{min-height:128px}
.campaign-analytics-grid{grid-template-columns:repeat(2,minmax(280px,1fr))}
.campaign-chart-box{min-height:174px;display:flex;flex-direction:column;justify-content:center}
.campaign-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:138px;padding:22px;border:1px dashed rgba(174,111,240,.24);border-radius:16px;background:linear-gradient(145deg,rgba(174,111,240,.055),rgba(255,255,255,.012));color:var(--muted)}
.campaign-empty strong{color:var(--text);font-size:14px}.campaign-empty span{font-size:12.5px;max-width:430px;line-height:1.5}
.campaign-bar-list,.campaign-funnel-list{display:flex;flex-direction:column;gap:14px;width:100%}
.campaign-bar-row{display:grid;grid-template-columns:135px 1fr 105px;gap:12px;align-items:center;font-size:12px;color:var(--muted)}
.campaign-bar-row span{font-weight:750;color:rgba(236,236,245,.82)}.campaign-bar-row strong{text-align:right;color:var(--text);font-size:12.5px}
.campaign-bar-track{height:12px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
.campaign-bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(174,111,240,.86),rgba(96,165,250,.72));box-shadow:0 0 16px rgba(174,111,240,.16)}
.campaign-bar-track.green i{background:linear-gradient(90deg,rgba(74,222,128,.82),rgba(34,211,238,.68))}.campaign-bar-track.yel i{background:linear-gradient(90deg,rgba(251,191,36,.82),rgba(249,115,22,.64))}.campaign-bar-track.danger i{background:linear-gradient(90deg,rgba(248,113,113,.86),rgba(251,113,133,.64))}
@media(max-width:1180px){.campaign-kpi-cards{grid-template-columns:repeat(2,minmax(190px,1fr))}.campaign-analytics-grid{grid-template-columns:1fr}}
@media(max-width:720px){.campaign-kpi-cards{grid-template-columns:1fr}.campaign-bar-row{grid-template-columns:1fr;gap:7px}.campaign-bar-row strong{text-align:left}}

/* Canais / WhatsApp / Instagram */
.channels-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}.channel-card{border:1px solid rgba(255,255,255,.075);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.18);min-height:220px}.channel-card.is-connected{border-color:rgba(74,222,128,.22);background:linear-gradient(145deg,rgba(74,222,128,.055),rgba(255,255,255,.014))}.channel-card.is-pending{border-color:rgba(251,191,36,.18)}.channel-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.channel-card h3{margin:0 0 3px;font-size:15px}.channel-card p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}.channel-creds{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.channel-creds span{font-size:11px;border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:5px 8px;background:rgba(255,255,255,.025);color:var(--muted)}.channel-warnings{display:flex;flex-direction:column;gap:6px;margin-top:12px}.channel-warnings span{font-size:11px;line-height:1.45;border:1px solid rgba(251,191,36,.18);border-radius:10px;padding:8px 9px;color:var(--yel);background:rgba(251,191,36,.035)}

.checkbox-stack{display:flex;flex-direction:column;gap:10px}
.checkbox-inline{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--text);line-height:1.5}
.checkbox-inline input{margin-top:2px}
.code-preview{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.55;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(8,10,18,.72);padding:14px;max-height:340px;overflow:auto;color:#d8dbff;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
@media(max-width:900px){.checkbox-stack{gap:8px}.code-preview{max-height:260px}}

/* ── Guided Funnel Builder refinements ── */
.guided-builder-hero {
  border: 1px solid rgba(174,111,240,.18);
  background: linear-gradient(135deg,rgba(174,111,240,.10),rgba(96,165,250,.045),rgba(255,255,255,.015));
  border-radius: 22px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(280px,1fr) auto;
  gap: 18px;
  align-items: center;
  box-shadow: 0 14px 38px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
}
.guided-builder-hero h2 { margin: 10px 0 6px; font-size: 21px; letter-spacing: -.02em; }
.guided-builder-hero p { margin: 0; color: var(--muted); line-height: 1.55; max-width: 780px; }
.guided-builder-steps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.guided-builder-steps span { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); border-radius: 999px; padding: 7px 10px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.guided-builder-steps strong { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(174,111,240,.18); color: var(--acc); margin-right: 5px; font-size: 11px; }
.guided-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 14px; }
.guided-summary-grid .card { min-height: 112px; }
.guided-action-bar { position: sticky; top: 0; z-index: 12; border: 1px solid rgba(255,255,255,.08); background: rgba(15,15,25,.88); backdrop-filter: blur(14px); border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.guided-action-bar strong { display: block; color: var(--text); }
.guided-action-bar span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.guided-template-row { display: flex; flex-wrap: wrap; gap: 8px; }
.block-library-group { display: grid; gap: 8px; }
.block-library-group + .block-library-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.block-library-title { color: var(--acc); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guided-flow-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.guided-flow-stats span { border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.028); border-radius: 999px; padding: 5px 9px; color: var(--muted); font-size: 11px; }
#builderBlockConfig { max-height: 760px; overflow: auto; }
#builderBlockConfig textarea { min-height: 130px; }
@media(max-width:1000px){ .guided-builder-hero{grid-template-columns:1fr}.guided-builder-steps{justify-content:flex-start}.guided-summary-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}.guided-action-bar{position:static;flex-direction:column;align-items:stretch} }
@media(max-width:620px){ .guided-summary-grid{grid-template-columns:1fr}.guided-builder-steps span{width:100%} }

/* Ajuste v3 — Construtor Guiado sem espaços vazios entre colunas.
   O grid antigo criava uma linha alta por causa da biblioteca de blocos,
   deixando um vazio grande abaixo de "Dados do funil". Agora os painéis
   são organizados por áreas independentes: esquerda operacional e direita
   de montagem/configuração. */
.guided-builder-grid {
  grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr);
  grid-template-areas:
    "settings flow"
    "library config"
    "library json"
    "library map";
  align-items: start;
  gap: 16px;
}
.guided-builder-grid > .panel:nth-child(1) { grid-area: settings; }
.guided-builder-grid > .panel:nth-child(2) { grid-area: library; }
.guided-builder-grid > .panel:nth-child(3) { grid-area: flow; }
.guided-builder-grid > .panel:nth-child(4) { grid-area: config; }
.guided-builder-grid > .panel:nth-child(5) { grid-area: json; }
.guided-builder-grid > .panel:nth-child(6) { grid-area: map; }
.guided-builder-grid .panel { margin: 0; }
.guided-builder-grid .panel-body { min-width: 0; }
.guided-builder-grid [data-collapse-key="fb-library"] .panel-body { max-height: 720px; overflow: auto; }
.guided-action-bar { top: 12px; }
@media(max-width:1180px){
  .guided-builder-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "settings"
      "library"
      "flow"
      "config"
      "json"
      "map";
  }
  .guided-builder-grid [data-collapse-key="fb-library"] .panel-body{max-height:none;overflow:visible;}
}

/* Delivery / iFood — ajustes de organização, mock/homologação/produção e gráficos locais */
.delivery-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}.delivery-header .subtitle{margin-bottom:0}.delivery-warning{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;border:1px solid rgba(251,191,36,.28);background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(255,255,255,.018));border-radius:15px;padding:14px 16px;color:rgba(255,224,138,.95);font-size:13px;line-height:1.5}.delivery-warning:before{content:'⚠';font-size:22px;line-height:1}.delivery-warning strong{color:#ffd45d}.delivery-kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:18px}.delivery-layout{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px}.delivery-checklist{display:grid;gap:9px}.delivery-check-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.026);border-radius:12px;padding:10px 12px}.delivery-check-row span{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-weight:900}.delivery-check-row strong{font-size:12.5px;color:var(--text)}.delivery-check-row em{font-style:normal;font-size:11px;color:var(--muted)}.delivery-check-row.ok{border-color:rgba(74,222,128,.2);background:rgba(74,222,128,.045)}.delivery-check-row.ok span{background:rgba(74,222,128,.14);color:var(--green)}.delivery-check-row.wait{border-color:rgba(251,191,36,.18);background:rgba(251,191,36,.035)}.delivery-check-row.wait span{background:rgba(251,191,36,.12);color:var(--yel)}.delivery-chart{display:grid;gap:12px;min-height:150px}.delivery-chart-empty,.delivery-empty{border:1px dashed rgba(174,111,240,.22);background:linear-gradient(145deg,rgba(174,111,240,.05),rgba(255,255,255,.012));border-radius:15px;padding:22px;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}.delivery-empty{margin-bottom:12px}.delivery-bar-row{display:grid;grid-template-columns:120px 1fr 42px;gap:10px;align-items:center;font-size:12px;color:var(--muted)}.delivery-bar-row strong{font-size:12px;color:var(--text);text-align:right}.delivery-bar-track{height:11px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);overflow:hidden}.delivery-bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(174,111,240,.92),rgba(96,165,250,.78));box-shadow:0 0 14px rgba(174,111,240,.16)}@media(max-width:1080px){.delivery-layout{grid-template-columns:1fr}.delivery-bar-row{grid-template-columns:86px 1fr 34px}.delivery-warning{grid-template-columns:1fr}.delivery-header .btn{width:100%}}

/* API & Conexões — status, checklist e segurança */
.api-card-dot.err { background: var(--red); box-shadow: 0 0 0 3px rgba(248,113,113,.1), 0 0 9px rgba(248,113,113,.28); }
.api-card-dot.sim { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.09), 0 0 9px rgba(96,165,250,.22); }
.api-card-badges { max-width: 150px; }
.panel-soft { border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025); border-radius: 15px; padding: 14px; }
.api-checklist-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.api-check-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.028); color: var(--muted); font-size: 12px; line-height: 1.35; }
.api-check-item span { display: inline-flex; width: 20px; height: 20px; border-radius: 999px; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex: 0 0 auto; }
.api-check-item.done { border-color: rgba(74,222,128,.18); background: rgba(74,222,128,.055); color: var(--text); }
.api-check-item.done span { color: var(--green); background: rgba(74,222,128,.12); }
.api-check-item.pending { border-color: rgba(251,191,36,.18); background: rgba(251,191,36,.055); }
.api-check-item.pending span { color: var(--yel); background: rgba(251,191,36,.12); }
.api-result-json { margin-top: 10px; white-space: pre-wrap; max-height: 260px; overflow: auto; font-size: 11px; opacity: .82; }
@media(max-width:820px){.api-checklist-list{grid-template-columns:1fr}.api-card-badges{max-width:none}}

/* API & Conexões — layout premium v2 inspirado na prévia escolhida */
.api-v2-page{--api-line:rgba(255,255,255,.075);--api-soft:rgba(255,255,255,.035);--api-purple:rgba(174,111,240,.18);}
.api-v2-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}.api-v2-header h2{font-size:26px;margin:0 0 5px;letter-spacing:-.03em}.api-title-lock{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:9px;background:rgba(174,111,240,.12);color:var(--acc);font-size:15px}.api-v2-top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.api-env-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--api-line);background:rgba(255,255,255,.028);border-radius:12px;padding:10px 13px;color:var(--text);font-size:12px;font-weight:800}.api-env-pill span{width:7px;height:7px;border-radius:999px;background:var(--green);box-shadow:0 0 10px rgba(74,222,128,.5)}
.api-v2-tabs{display:flex;align-items:center;gap:0;max-width:720px;border:1px solid var(--api-line);background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border-radius:12px;overflow:hidden}.api-v2-tabs button{flex:1;min-width:112px;padding:13px 18px;border:0;border-right:1px solid rgba(255,255,255,.05);background:transparent;color:var(--muted);font:700 12px inherit;cursor:pointer}.api-v2-tabs button:hover,.api-v2-tabs button.active-strong{color:#fff;background:linear-gradient(135deg,rgba(174,111,240,.8),rgba(126,83,216,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.api-v2-tabs button.active{background:rgba(255,255,255,.035);color:var(--text)}
.api-v2-summary{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:14px}.api-v2-kpi{position:relative;overflow:hidden;display:flex;gap:14px;align-items:center;padding:17px;border:1px solid var(--api-line);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.016));box-shadow:0 14px 40px rgba(0,0,0,.24)}.api-v2-kpi:after{content:'';position:absolute;right:-34px;bottom:-34px;width:90px;height:90px;border-radius:50%;background:rgba(174,111,240,.07)}.api-kpi-icon{position:relative;z-index:1;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}.api-kpi-icon.green{color:var(--green);background:rgba(74,222,128,.1)}.api-kpi-icon.yel{color:var(--yel);background:rgba(251,191,36,.1)}.api-kpi-icon.blue{color:#60a5fa;background:rgba(96,165,250,.1)}.api-kpi-icon.red{color:var(--red);background:rgba(248,113,113,.1)}.api-v2-kpi small{display:block;color:var(--muted);font-size:12px;font-weight:800}.api-v2-kpi strong{display:block;font-size:24px;line-height:1.15;margin-top:3px}.api-v2-kpi em{display:block;color:var(--muted);font-size:11px;font-style:normal;margin-top:3px}.api-v2-cats{display:block}.api-v2-cats div{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.api-v2-cats span{display:inline-flex;align-items:center;gap:6px;border-radius:12px;padding:8px 10px;background:rgba(174,111,240,.12);border:1px solid rgba(174,111,240,.15);font-size:11px;font-weight:800;color:var(--text)}
.api-v2-workspace{display:grid;grid-template-columns:300px minmax(390px,1fr) minmax(390px,.95fr);gap:14px;align-items:start}.api-v2-sidebar,.api-v2-main,.api-v2-right{min-width:0}.api-search-row{display:grid;grid-template-columns:1fr auto;gap:8px}.api-v2-category-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}.api-v2-category{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:11px;padding:9px 10px;font:800 11px inherit;cursor:pointer;text-align:left}.api-v2-category:hover,.api-v2-category.active{color:#fff;border-color:rgba(174,111,240,.24);background:linear-gradient(135deg,rgba(174,111,240,.16),rgba(255,255,255,.02))}.api-v2-category b{font-size:10px;color:var(--muted);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:999px}.api-v2-integration-list{max-height:620px;overflow:auto;padding-right:3px}.api-v2-group{margin-bottom:13px}.api-v2-group-title{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin:7px 0 8px}.api-v2-row{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.025);border-radius:13px;padding:9px;margin-bottom:7px;color:var(--text);cursor:pointer;transition:.18s ease}.api-v2-row:hover{transform:translateY(-1px);border-color:rgba(174,111,240,.25);background:rgba(174,111,240,.07)}.api-v2-row.selected{background:linear-gradient(135deg,rgba(174,111,240,.22),rgba(255,255,255,.028));border-color:rgba(174,111,240,.5);box-shadow:0 12px 30px rgba(0,0,0,.22),inset 3px 0 0 var(--acc)}.api-v2-row-icon{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(174,111,240,.12);border:1px solid rgba(174,111,240,.18)}.api-v2-row-icon.connected,.api-v2-row-icon.configured,.api-v2-row-icon.production{background:rgba(74,222,128,.11);border-color:rgba(74,222,128,.18)}.api-v2-row-icon.homologation{background:rgba(96,165,250,.11);border-color:rgba(96,165,250,.18)}.api-v2-row-icon.error{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.2)}.api-v2-row-main strong{display:block;font-size:12px}.api-v2-row-main em{display:block;color:var(--muted);font-size:10.5px;font-style:normal;margin-top:2px}.api-v2-row-status{font-size:10px;font-weight:900;white-space:nowrap}.api-v2-add{width:100%;padding:12px;border-radius:12px;border:1px dashed rgba(174,111,240,.35);background:rgba(174,111,240,.06);color:var(--acc);font-weight:900;cursor:pointer}.api-v2-add:hover{background:rgba(174,111,240,.12)}
.api-v2-provider-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}.api-provider-desc{grid-column:1/-1}.api-provider-actions{display:flex;gap:8px;align-items:center}.api-v2-selected-head{display:flex;gap:13px;align-items:center}.api-v2-selected-head strong{display:block;font-size:22px;letter-spacing:-.02em}.api-v2-selected-head em{display:block;color:var(--muted);font-size:12px;font-style:normal}.api-mode-switch{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);max-width:420px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}.api-mode-switch button{padding:12px;border:0;border-right:1px solid rgba(255,255,255,.05);background:transparent;color:var(--muted);font-weight:800}.api-mode-switch button.active{background:rgba(74,222,128,.12);color:var(--green)}.api-v2-checklist{display:flex;flex-direction:column;gap:8px}.api-v2-checklist .api-check-item{display:grid;grid-template-columns:auto 1fr auto;padding:12px}.api-check-item em{font-style:normal;font-size:11px;color:var(--muted);font-weight:800}.api-v2-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.api-v2-info-grid div{padding:12px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.025);border-radius:12px}.api-v2-info-grid small{display:block;color:var(--muted);font-size:11px;font-weight:800}.api-v2-info-grid strong{display:block;margin-top:4px;font-size:13px}.api-v2-secret-area{min-height:88px;font-family:'DM Mono',monospace;font-size:11px}.api-v2-right-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.api-endpoint{display:block;font-family:'DM Mono',monospace;font-size:11px;padding:5px 0;color:var(--muted)}.api-endpoint b{display:inline-block;min-width:42px;color:#60a5fa}.api-card-icon svg{filter:drop-shadow(0 5px 10px rgba(174,111,240,.16))}
@media(max-width:1420px){.api-v2-workspace{grid-template-columns:280px 1fr}.api-v2-right{grid-column:1/-1}.api-v2-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:980px){.api-v2-workspace,.api-v2-summary,.api-v2-right-grid{grid-template-columns:1fr}.api-v2-tabs{overflow:auto}.api-v2-tabs button{min-width:130px}.api-v2-info-grid{grid-template-columns:1fr}.api-v2-provider-head{grid-template-columns:1fr}}

/* API & Conexões — layout escolhido pelo usuário (preview 2, fiel à imagem de referência) */
.api-photo-page{--photo-bg:#080b13;--photo-card:rgba(17,22,34,.78);--photo-card2:rgba(12,17,28,.86);--photo-border:rgba(132,146,178,.14);--photo-purple:#8b5cf6;--photo-purple2:#b56cff;--photo-green:#22c55e;--photo-yellow:#fbbf24;--photo-blue:#38bdf8;--photo-red:#ef4444;color:#eef2ff}.api-photo-page .panel{background:linear-gradient(145deg,rgba(18,24,37,.88),rgba(10,14,24,.92));border:1px solid var(--photo-border);box-shadow:0 22px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);border-radius:15px}.api-photo-header{margin-top:-2px}.api-photo-header h2{font-size:24px;line-height:1.1;margin:0 0 4px;letter-spacing:-.04em}.api-photo-header .mini-help{font-size:12px;color:#a8afc2}.api-user-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--photo-border);border-radius:12px;background:rgba(255,255,255,.04);padding:9px 11px;font-weight:900;color:#fff}.api-photo-page .btn{border-radius:10px}.api-photo-page .btn-ghost{background:rgba(255,255,255,.028);border-color:rgba(147,160,190,.14);color:#e8ebf8}.api-photo-tabs{max-width:710px;height:43px;background:rgba(16,21,33,.88);border-color:rgba(132,146,178,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.api-photo-tabs button{font-size:12px;color:#aeb6c9;min-width:118px}.api-photo-tabs button.active-strong{background:linear-gradient(180deg,#8b4cf6,#6d35d7);box-shadow:0 12px 32px rgba(139,92,246,.32),inset 0 1px 0 rgba(255,255,255,.18);color:#fff}.api-photo-summary{grid-template-columns:1fr 1fr 1fr 1fr 1.58fr;gap:13px}.api-photo-summary .api-v2-kpi{min-height:82px;padding:14px 16px;border-radius:14px;background:linear-gradient(145deg,rgba(18,24,36,.82),rgba(10,15,26,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.api-photo-summary .api-v2-kpi:after{display:none}.api-photo-summary .api-kpi-icon{width:48px;height:48px;border-radius:14px;font-size:20px}.api-photo-summary .api-v2-kpi small{font-size:12px;color:#c0c6d8}.api-photo-summary .api-v2-kpi strong{font-size:23px}.api-photo-summary .api-v2-kpi em{font-size:11px;color:#a8afc2}.api-photo-summary .api-v2-cats{padding-top:14px}.api-photo-summary .api-v2-cats small{font-size:13px;color:#d7dbeb}.api-photo-summary .api-v2-cats div{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.api-photo-summary .api-v2-cats span{background:linear-gradient(145deg,rgba(139,92,246,.16),rgba(255,255,255,.03));padding:9px 10px;border-color:rgba(139,92,246,.17);justify-content:center}.api-photo-workspace{grid-template-columns:300px minmax(440px,1fr) minmax(560px,.98fr);gap:14px;align-items:start}.api-photo-list{padding:12px}.api-photo-list .api-search-row{margin-bottom:10px}.api-photo-list input{height:38px;border-radius:10px;background:rgba(6,10,18,.6);border-color:rgba(135,148,176,.16)}.api-v2-category-list.hidden{display:none!important}.api-v2-integration-list{max-height:650px;overflow:auto;padding-right:2px}.api-v2-integration-list::-webkit-scrollbar{width:6px}.api-v2-integration-list::-webkit-scrollbar-thumb{background:rgba(139,92,246,.4);border-radius:99px}.api-photo-page .api-v2-group{margin-bottom:14px}.api-photo-page .api-v2-group-title{font-size:11px;color:#aeb5c8;letter-spacing:.045em;margin:7px 0 7px;padding:0 4px;border-top:1px solid rgba(255,255,255,.06);padding-top:10px}.api-photo-page .api-v2-group:first-child .api-v2-group-title{border-top:0;padding-top:2px}.api-photo-page .api-v2-row{height:35px;margin-bottom:5px;padding:5px 7px;border:0;background:transparent;border-radius:9px;grid-template-columns:28px 1fr auto}.api-photo-page .api-v2-row:hover,.api-photo-page .api-v2-row.selected{transform:none;border-color:transparent;background:linear-gradient(90deg,rgba(139,92,246,.34),rgba(139,92,246,.08));box-shadow:none;inset:auto}.api-photo-page .api-v2-row.selected{box-shadow:inset 3px 0 0 #8b5cf6}.api-photo-page .api-v2-row-icon{width:26px;height:26px;border-radius:8px}.api-photo-page .api-card-icon svg{width:16px;height:16px}.api-photo-page .api-v2-row-main strong{font-size:12px;color:#fff}.api-photo-page .api-v2-row-main em{display:none}.api-photo-page .api-v2-row-status{font-size:9px}.api-v2-add{height:38px;margin-top:6px;background:rgba(255,255,255,.025);border-color:rgba(151,163,190,.18);color:#e7eaff}.api-photo-provider{min-height:132px;grid-template-columns:1fr auto;padding:18px}.api-photo-provider .api-v2-selected-head{gap:15px}.api-photo-provider .api-card-icon.large{width:70px;height:70px;border-radius:999px;background:radial-gradient(circle at center,rgba(248,113,113,.32),rgba(139,92,246,.18));border:2px solid rgba(181,108,255,.6);box-shadow:0 0 28px rgba(181,108,255,.28)}.api-photo-provider .api-card-icon.large svg{width:34px;height:34px;color:#ff5c35}.api-photo-provider .api-v2-selected-head strong{font-size:22px}.api-provider-actions .badge{display:none}.api-photo-provider .api-provider-desc{margin:-34px 0 0 88px;font-size:12px}.api-mode-switch{margin-left:88px;max-width:388px;height:40px;border-radius:9px;background:rgba(7,11,18,.7)}.api-mode-switch button{padding:9px;font-size:12px}.api-mode-switch button.active{background:linear-gradient(180deg,rgba(34,197,94,.25),rgba(34,197,94,.12));box-shadow:inset 0 0 0 1px rgba(34,197,94,.18)}.api-photo-checklist{min-height:300px;padding:18px}.api-photo-checklist h3,.api-photo-info h3,.api-photo-right h3{font-size:16px;letter-spacing:-.02em}.api-v2-checklist{gap:0}.api-photo-page .api-check-item{position:relative;display:grid;grid-template-columns:32px 1fr auto;gap:10px;padding:9px 0;border:0;background:transparent}.api-photo-page .api-check-item:not(:last-child):before{content:'';position:absolute;left:15px;top:31px;bottom:-8px;width:2px;border-left:2px dashed rgba(139,92,246,.48)}.api-photo-page .api-check-item span{z-index:1;width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#8b5cf6,#6932d5);color:#fff;font-size:12px;font-weight:900;box-shadow:0 0 0 3px rgba(139,92,246,.12)}.api-photo-page .api-check-item.done span{background:linear-gradient(180deg,#8b5cf6,#713ee3)}.api-photo-page .api-check-item strong{font-size:13px}.api-photo-page .api-check-item small{display:block;color:#aeb5c8;font-size:11px;margin-top:2px}.api-photo-page .api-check-item em{text-align:right;color:#22c55e;font-size:11px;font-weight:900}.api-photo-page .api-check-item em small{font-weight:700}.api-photo-info{padding:18px;min-height:180px}.api-photo-info .api-v2-info-grid{grid-template-columns:repeat(3,1fr);gap:18px 24px}.api-photo-info .api-v2-info-grid div{background:transparent;border:0;padding:4px}.api-photo-info .api-v2-info-grid small{font-size:12px;color:#aeb5c8}.api-photo-info .api-v2-info-grid strong{font-size:13px;color:#f4f6ff}.api-dot{display:inline-block;width:7px;height:7px;border-radius:999px;margin-right:6px}.api-dot.green{background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.55)}.api-photo-right .panel{padding:16px}.api-photo-credentials{min-height:124px}.api-credential-rows{display:grid;gap:0}.api-credential-row{display:grid;grid-template-columns:150px 1fr 28px 28px;gap:8px;align-items:center;min-height:26px;border-top:1px solid rgba(255,255,255,.06);font-size:12px}.api-credential-row:first-child{border-top:0}.api-credential-row span{color:#b8bfd3}.api-credential-row strong{font-family:'DM Mono',monospace;color:#f4f6ff;font-size:11.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.api-credential-row button{width:24px;height:24px;border:0;background:transparent;color:#aeb5c8;cursor:pointer}.api-photo-right-grid{grid-template-columns:1fr 1fr;gap:12px}.api-photo-mini{min-height:184px}.api-photo-mini .mini-list{display:block}.api-photo-page .api-endpoint{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.055);padding:7px 0;color:#c5ccde}.api-photo-page .api-endpoint:first-child{border-top:0}.api-photo-page .api-endpoint b{min-width:44px;text-align:center;border-radius:5px;padding:2px 5px;background:rgba(59,130,246,.18);color:#60a5fa;font-size:9px}.api-link-btn{display:block;margin-top:8px;border:0;background:rgba(139,92,246,.12);color:#c084fc;border-radius:8px;padding:8px 10px;font-weight:900;font-size:11px;cursor:pointer}.api-webhook-list{display:grid;gap:8px}.api-webhook-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.055);padding-top:8px;font-size:12px}.api-webhook-row:first-child{border-top:0}.api-webhook-row span{display:flex;align-items:center;gap:7px;color:#dfe4f4}.api-webhook-row i{width:7px;height:7px;border-radius:999px;background:#22c55e}.api-webhook-row strong{color:#b8bfd3;font-size:11px}.api-photo-bottom-grid{align-items:stretch}.api-photo-events,.api-photo-test{min-height:272px}.api-events-cards{display:grid;gap:8px}.api-event-card{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border-top:1px solid rgba(255,255,255,.055);padding-top:8px;font-size:11px}.api-event-card:first-child{border-top:0}.api-event-card b{display:block;font-weight:700;color:#dfe4f4}.api-event-card small{display:block;color:#8992aa}.api-event-card em{font-style:normal;border-radius:7px;background:rgba(139,92,246,.22);color:#c084fc;padding:4px 7px;font-weight:900}.api-event-card strong{border-radius:999px;background:rgba(34,197,94,.16);color:#22c55e;padding:4px 7px;font-size:10px}.api-photo-test label{font-size:11px;color:#aeb5c8;margin-top:10px}.api-photo-test select,.api-photo-test textarea{width:100%;border-radius:9px;background:rgba(4,8,15,.72);border:1px solid rgba(132,146,178,.14);color:#f5f7ff}.api-test-payload{min-height:94px;font-family:'DM Mono',monospace;font-size:11px}.w-full{width:100%}.api-result-json{white-space:pre-wrap;max-height:160px;overflow:auto;margin-top:8px}
@media(max-width:1500px){.api-photo-workspace{grid-template-columns:280px minmax(400px,1fr)}.api-photo-right{grid-column:1/-1}.api-photo-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:980px){.api-photo-workspace,.api-photo-summary,.api-photo-right-grid{grid-template-columns:1fr}.api-photo-provider .api-provider-desc,.api-mode-switch{margin-left:0}.api-photo-info .api-v2-info-grid{grid-template-columns:1fr}.api-credential-row{grid-template-columns:120px 1fr 24px 24px}}

/* API & Conexões — layout fiel à prévia escolhida (grid premium) */
.api-preview-page{--p-bg:#070b13;--p-panel:#101723;--p-panel2:#0c111c;--p-border:rgba(151,163,190,.13);--p-purple:#8b5cf6;--p-purple2:#a855f7;--p-green:#22c55e;--p-yellow:#eab308;--p-blue:#0ea5e9;--p-red:#ef4444;color:#eef2ff;min-width:1120px}.api-preview-page .panel{background:linear-gradient(145deg,rgba(18,24,36,.92),rgba(9,13,22,.96));border:1px solid var(--p-border);box-shadow:0 24px 62px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);border-radius:16px}.api-preview-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.api-preview-header h2{margin:0 0 7px;font-size:27px;letter-spacing:-.04em;display:flex;align-items:center;gap:8px}.api-title-link{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:13px;color:#aeb5c8}.api-preview-header .mini-help{font-size:13px;color:#a7b0c5}.api-preview-top-actions{display:flex;align-items:center;gap:12px}.api-preview-top-actions .btn{height:40px;border-radius:10px;padding:0 18px;font-size:12px;font-weight:900}.api-preview-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#f5f7ff;font-weight:900}.api-preview-user{display:inline-flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:900}.api-preview-user b{width:34px;height:34px;border-radius:999px;background:linear-gradient(180deg,#8b5cf6,#6d35d7);display:inline-flex;align-items:center;justify-content:center}.api-preview-user small{display:block;color:#aeb5c8;font-size:10px;font-weight:700}.api-preview-summary{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:14px}.api-preview-kpi{position:relative;overflow:hidden;min-height:126px;padding:16px;border:1px solid var(--p-border);border-radius:15px;background:linear-gradient(145deg,rgba(20,27,40,.86),rgba(10,15,25,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.api-preview-kpi{display:grid;grid-template-columns:52px 1fr;grid-template-rows:1fr 28px;gap:5px 13px}.api-preview-kpi-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;grid-row:1}.api-preview-kpi small{display:block;color:#c5cbda;font-size:12px;font-weight:800}.api-preview-kpi strong{display:block;font-size:25px;line-height:1.1;margin-top:5px;color:#fff}.api-preview-kpi em{display:block;color:#9aa4ba;font-size:11px;font-style:normal;margin-top:5px;line-height:1.35}.api-preview-spark{grid-column:1/-1;width:100%;height:28px}.api-preview-spark path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;opacity:.95}.api-preview-kpi.green{color:var(--p-green)}.api-preview-kpi.yel{color:var(--p-yellow)}.api-preview-kpi.acc{color:var(--p-purple)}.api-preview-kpi.blue{color:var(--p-blue)}.api-preview-kpi.muted{color:#9ca3af}.api-preview-kpi.danger{color:var(--p-red)}.api-preview-kpi.green .api-preview-kpi-icon{background:rgba(34,197,94,.13)}.api-preview-kpi.yel .api-preview-kpi-icon{background:rgba(234,179,8,.13)}.api-preview-kpi.acc .api-preview-kpi-icon{background:rgba(139,92,246,.17)}.api-preview-kpi.blue .api-preview-kpi-icon{background:rgba(14,165,233,.14)}.api-preview-kpi.muted .api-preview-kpi-icon{background:rgba(148,163,184,.14)}.api-preview-kpi.danger .api-preview-kpi-icon{background:rgba(239,68,68,.14)}
.api-preview-workspace{display:grid;grid-template-columns:minmax(520px,.96fr) minmax(620px,1.04fr);gap:16px;align-items:start}.api-preview-left,.api-preview-detail{padding:14px}.api-preview-filter-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.api-preview-chip{height:28px;padding:0 12px;border-radius:10px;border:1px solid rgba(151,163,190,.12);background:rgba(255,255,255,.035);color:#aeb5c8;font:800 11px inherit;cursor:pointer}.api-preview-chip.active,.api-preview-chip:hover{color:#fff;background:linear-gradient(180deg,#8b5cf6,#6d35d7);border-color:rgba(255,255,255,.12);box-shadow:0 10px 28px rgba(139,92,246,.25)}.api-preview-search-row{display:grid;grid-template-columns:1fr 165px 38px 38px;gap:9px}.api-preview-search-row input,.api-preview-search-row select{height:40px;border-radius:10px;background:rgba(5,9,16,.72);border:1px solid rgba(151,163,190,.13);color:#dfe5f7}.api-view-btn{height:40px;border-radius:10px;border:1px solid rgba(151,163,190,.13);background:rgba(255,255,255,.035);color:#aeb5c8;cursor:pointer}.api-view-btn.active{color:#fff;background:rgba(139,92,246,.18)}.api-preview-left h3{font-size:17px;margin:12px 0 13px}.api-preview-grid{display:grid;grid-template-columns:repeat(4,minmax(118px,1fr));gap:10px}.api-preview-card-tile{position:relative;min-height:138px;border:1px solid rgba(151,163,190,.12);border-radius:13px;background:linear-gradient(145deg,rgba(25,32,45,.82),rgba(12,18,29,.92));padding:13px;text-align:left;color:#eef2ff;cursor:pointer;transition:.16s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.api-preview-card-tile:hover{transform:translateY(-1px);border-color:rgba(139,92,246,.32);box-shadow:0 18px 38px rgba(0,0,0,.24)}.api-preview-card-tile.selected{border-color:rgba(168,85,247,.86);box-shadow:0 0 0 1px rgba(168,85,247,.45),0 0 28px rgba(139,92,246,.18),inset 0 1px 0 rgba(255,255,255,.04)}.api-card-menu{position:absolute;right:11px;top:10px;color:#c0c7d8;font-size:18px}.api-selected-check{position:absolute;right:9px;top:55px;width:20px;height:20px;border-radius:999px;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}.api-card-logo{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:11px;background:linear-gradient(145deg,rgba(139,92,246,.2),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.08)}.api-card-logo svg,.api-card-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.api-card-logo.connected,.api-card-logo.configured,.api-card-logo.production{background:linear-gradient(145deg,rgba(34,197,94,.24),rgba(20,184,166,.12));color:#ecfeff}.api-card-logo.pending{background:rgba(234,179,8,.16);color:#facc15}.api-card-logo.homologation{background:rgba(139,92,246,.22);color:#c084fc}.api-card-logo.mock{background:rgba(148,163,184,.16);color:#cbd5e1}.api-card-logo.error{background:rgba(239,68,68,.18);color:#f87171}.api-preview-card-tile strong{display:block;font-size:14px;line-height:1.15}.api-preview-card-tile em{display:block;color:#a3acc0;font-style:normal;font-size:11px;margin-top:4px}.api-mini-status{display:inline-flex;align-items:center;gap:5px;margin-top:10px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900}.api-mini-status.green{background:rgba(34,197,94,.15);color:#22c55e}.api-mini-status.yel{background:rgba(234,179,8,.16);color:#facc15}.api-mini-status.acc{background:rgba(139,92,246,.17);color:#c084fc}.api-mini-status.danger{background:rgba(239,68,68,.15);color:#f87171}.api-mini-status.muted{background:rgba(148,163,184,.13);color:#cbd5e1}.api-preview-add{width:100%;height:52px;margin-top:12px;border:1px dashed rgba(168,85,247,.48);border-radius:12px;background:rgba(139,92,246,.055);color:#c084fc;display:flex;align-items:center;gap:12px;padding:0 15px;text-align:left;cursor:pointer}.api-preview-add b{font-size:24px;font-weight:400}.api-preview-add span{font-weight:900}.api-preview-add small{display:block;color:#a3acc0;font-weight:600}
.api-preview-detail{padding:18px}.api-preview-provider-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.api-preview-title-row{display:flex;align-items:center;gap:12px}.api-preview-title-row .api-card-icon.large{width:37px;height:37px;border-radius:12px;background:rgba(248,113,43,.16);color:#ff5c35;display:flex;align-items:center;justify-content:center}.api-preview-title-row .api-card-icon.large svg{width:25px;height:25px}.api-preview-title-row strong{font-size:18px;color:#fff}.api-preview-title-row em{font-style:normal;font-size:11px;margin-left:8px;color:#a3acc0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);padding:4px 8px;border-radius:999px}.api-doc-line{margin-top:8px}.linklike{border:0;background:transparent;color:#c084fc;font-weight:900;cursor:pointer;padding:0}.api-kebab{border:0;background:transparent;color:#cbd5e1;font-size:22px;cursor:pointer}.api-preview-tabs{display:flex;gap:24px;border-bottom:1px solid rgba(151,163,190,.11);margin-top:16px}.api-preview-tabs button{height:38px;border:0;background:transparent;color:#aeb5c8;font:800 12px inherit;cursor:pointer;position:relative}.api-preview-tabs button.active{color:#c084fc}.api-preview-tabs button.active:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#a855f7;border-radius:99px}.api-preview-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.api-preview-card{background:linear-gradient(145deg,rgba(20,27,40,.74),rgba(9,14,24,.82));border:1px solid rgba(151,163,190,.105);border-radius:13px;padding:14px;min-height:176px}.api-preview-card h3{margin:0;font-size:14px}.api-preview-checklist{display:grid;gap:12px;margin-top:11px}.api-preview-page .api-check-item{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:start;background:transparent;border:0;padding:0}.api-preview-page .api-check-item span{width:18px;height:18px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.45);color:#22c55e;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;margin-top:1px}.api-preview-page .api-check-item strong{font-size:12px}.api-preview-page .api-check-item small{display:block;color:#9aa4ba;font-size:10.5px;margin-top:2px}.api-preview-page .api-check-item em{font-style:normal;text-align:right;font-size:0;color:#22c55e}.api-preview-page .api-check-item em::first-line{font-size:0}.api-preview-page .api-check-item em{min-width:10px}.api-preview-page .api-check-item em:after{content:'';display:block;width:7px;height:7px;border-radius:999px;background:#facc15;margin-top:8px}.api-preview-page .api-check-item.done em:after{background:#22c55e}.api-credential-row{grid-template-columns:112px 1fr 26px!important;min-height:40px;border-top:1px solid rgba(255,255,255,.055)}.api-credential-row button[title='Ocultar']{display:none}.api-credential-row strong{background:rgba(6,10,18,.55);border:1px solid rgba(151,163,190,.1);border-radius:8px;padding:8px 10px;color:#dfe5f7}.api-preview-code{height:145px;margin:11px 0 0;border-radius:10px;background:rgba(5,8,14,.75);border:1px solid rgba(151,163,190,.1);padding:12px;color:#fca5a5;font:11px/1.55 'DM Mono',monospace;overflow:auto;white-space:pre-wrap}.api-events-cards{display:grid;gap:8px;margin-top:7px}.api-event-card{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border-top:1px solid rgba(255,255,255,.055);padding-top:8px;font-size:11px}.api-event-card:first-child{border-top:0}.api-event-card b{display:block;color:#dfe4f4;font-weight:600}.api-event-card small{display:block;color:#8590a7}.api-event-card em{font-style:normal;color:#f4f6ff;font-weight:800;background:transparent;padding:0}.api-event-card strong{color:#22c55e;font-size:12px;background:transparent;padding:0}.api-preview-footer-actions{display:flex;gap:12px;align-items:center}.api-preview-footer-actions .btn{height:42px;border-radius:10px;padding:0 22px;font-weight:900}.api-preview-footer-actions .btn-success{background:rgba(22,163,74,.35);border-color:rgba(34,197,94,.35);color:#bbf7d0}
@media(max-width:1500px){.api-preview-summary{grid-template-columns:repeat(3,1fr)}.api-preview-workspace{grid-template-columns:1fr}.api-preview-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:1050px){.api-preview-page{min-width:0}.api-preview-summary,.api-preview-workspace,.api-preview-detail-grid{grid-template-columns:1fr}.api-preview-grid{grid-template-columns:repeat(2,1fr)}.api-preview-header,.api-preview-top-actions{flex-wrap:wrap}.api-preview-search-row{grid-template-columns:1fr}.api-preview-tabs{overflow:auto}}

/* ============================================================
   API & Conexões — refinamento visual FlowZen + ícones coloridos
   Mantém a estrutura existente e aproxima a tela da prévia aprovada.
   ============================================================ */
.api-preview-page{
  --fz-api-bg:#08080b;
  --fz-api-panel:#0d1018;
  --fz-api-panel-2:#101622;
  --fz-api-border:rgba(174,111,240,.18);
  --fz-api-border-soft:rgba(255,255,255,.075);
  --fz-api-purple:#ae6ff0;
  --fz-api-pink:#d96eea;
  --fz-api-green:#4ade80;
  color:#ececf5;
}
.api-preview-page .panel,
.api-preview-left,
.api-preview-detail{
  background:
    radial-gradient(circle at 18% 0%, rgba(174,111,240,.08), transparent 30%),
    linear-gradient(145deg, rgba(13,16,24,.94), rgba(8,8,11,.96));
  border:1px solid var(--fz-api-border);
  box-shadow:0 18px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
}
.api-preview-header h2{font-size:26px;font-weight:800;letter-spacing:-.03em;color:#fff;}
.api-title-link{display:inline-flex;width:22px;height:22px;border-radius:999px;align-items:center;justify-content:center;margin-left:6px;font-size:12px;color:#caa0ff;background:rgba(174,111,240,.12);border:1px solid rgba(174,111,240,.22)}
.api-preview-top-actions .btn-primary,
.api-preview-chip.active,
.api-preview-chip:hover{
  background:linear-gradient(135deg,#ae6ff0,#7b50dd 70%,#d96eea);
  border-color:rgba(217,110,234,.35);
  color:#fff;
  box-shadow:0 14px 34px rgba(174,111,240,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.api-preview-filter-chips{gap:9px}.api-preview-chip{border-radius:12px;height:32px;padding:0 14px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.085);color:#b8bed0;font-size:12px;}
.api-preview-search-row input,.api-preview-search-row select{background:rgba(5,8,14,.9);border-color:rgba(174,111,240,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.api-preview-search-row input:focus,.api-preview-search-row select:focus{outline:none;border-color:rgba(174,111,240,.55);box-shadow:0 0 0 3px rgba(174,111,240,.11)}
.api-view-btn.active{background:linear-gradient(135deg,rgba(174,111,240,.32),rgba(217,110,234,.14));border-color:rgba(174,111,240,.5);color:#fff;}
.api-preview-grid{gap:14px;}
.api-preview-card-tile{
  min-height:154px;
  border-radius:16px;
  padding:17px 16px 15px;
  background:
    radial-gradient(circle at 16% 0%, rgba(174,111,240,.07), transparent 32%),
    linear-gradient(145deg,rgba(17,22,34,.92),rgba(8,11,18,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
.api-preview-card-tile:hover{border-color:rgba(174,111,240,.5);transform:translateY(-2px);box-shadow:0 20px 42px rgba(0,0,0,.34),0 0 0 1px rgba(174,111,240,.12)}
.api-preview-card-tile.selected{border-color:rgba(174,111,240,.92);box-shadow:0 0 0 1px rgba(217,110,234,.35),0 0 32px rgba(174,111,240,.20),inset 0 1px 0 rgba(255,255,255,.06);}
.api-preview-card-tile strong{font-size:15px;font-weight:850;letter-spacing:-.015em;color:#fff;margin-top:3px}.api-preview-card-tile em{font-size:12.5px;color:#aeb5c8;}
.api-card-menu{top:13px;right:14px;color:#aeb5c8;opacity:.9}.api-selected-check{background:linear-gradient(135deg,#ae6ff0,#d96eea);right:10px;top:58px;box-shadow:0 0 18px rgba(174,111,240,.35)}
.api-card-logo{
  width:50px;height:50px;border-radius:15px;margin-bottom:13px;color:#fff;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 12px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22);
  background:linear-gradient(145deg,rgba(174,111,240,.28),rgba(217,110,234,.12));
}
.api-card-logo .api-card-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:transparent!important;border:0!important;color:inherit!important;}
.api-card-logo svg,.api-card-icon svg{width:27px;height:27px;stroke:currentColor;stroke-width:2;}
.api-card-icon.large{border:1px solid rgba(255,255,255,.13);box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.16)}
.api-preview-title-row .api-card-icon.large{background:linear-gradient(145deg,#ff6a2a,#9b2c16)!important;color:#fff!important;}
.api-preview-title-row .api-card-icon.large.api-brand-instagram{background:radial-gradient(circle at 28% 100%,#feda75 0 22%,transparent 23%),linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)!important;}
.api-mini-status{padding:6px 10px;border-radius:999px;font-size:11.5px;letter-spacing:-.01em}.api-mini-status i{width:13px;height:13px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;position:relative}.api-mini-status i:after{content:'✓';font-size:9px;font-weight:900}.api-mini-status.yel i:after{content:'◷';font-size:10px}.api-mini-status.acc i:after{content:'✦';}.api-mini-status.danger i:after{content:'!';}.api-mini-status.green{background:rgba(74,222,128,.14);color:#4ade80}.api-mini-status.yel{background:rgba(251,191,36,.16);color:#fbbf24}.api-mini-status.acc{background:rgba(174,111,240,.17);color:#d8b4fe}.api-mini-status.danger{background:rgba(248,113,113,.15);color:#f87171}

/* Ícones coloridos por integração — similares às marcas reais, sem expor assets externos */
.api-card-logo.api-brand-whatsapp,.api-card-icon.api-brand-whatsapp{background:linear-gradient(145deg,#4ade80,#16a34a)!important;color:#fff!important;}
.api-card-logo.api-brand-instagram,.api-card-icon.api-brand-instagram{background:radial-gradient(circle at 27% 105%,#feda75 0 22%,transparent 23%),linear-gradient(135deg,#833ab4 0%,#c13584 35%,#fd1d1d 68%,#fcb045 100%)!important;color:#fff!important;}
.api-card-logo.api-brand-webhooks,.api-card-icon.api-brand-webhooks{background:linear-gradient(145deg,#ae6ff0,#6d35d7)!important;color:#fff!important;}
.api-card-logo.api-brand-storage,.api-card-logo.api-brand-arquivos-e-midia,.api-card-icon.api-brand-storage{background:linear-gradient(145deg,#60a5fa,#2563eb)!important;color:#fff!important;}
.api-card-logo.api-brand-audit,.api-card-icon.api-brand-audit{background:linear-gradient(145deg,#34d399,#059669)!important;color:#fff!important;}
.api-card-logo.api-brand-cloud-backup,.api-card-icon.api-brand-cloud-backup{background:linear-gradient(145deg,#38bdf8,#2563eb)!important;color:#fff!important;}
.api-card-logo.api-brand-finance,.api-card-icon.api-brand-finance{background:linear-gradient(145deg,#65d66e,#16a34a)!important;color:#fff!important;}
.api-card-logo.api-brand-ecommerce,.api-card-icon.api-brand-ecommerce{background:linear-gradient(145deg,#fb923c,#f97316)!important;color:#fff!important;}
.api-card-logo.api-brand-email,.api-card-icon.api-brand-email{background:#fff!important;color:#2563eb!important;}
.api-card-logo.api-brand-stock,.api-card-icon.api-brand-stock{background:linear-gradient(145deg,#2dd4bf,#0f766e)!important;color:#fff!important;}
.api-card-logo.api-brand-google-calendar,.api-card-icon.api-brand-google-calendar{background:#fff!important;color:#4285f4!important;}
.api-card-logo.api-brand-google-sheets,.api-card-icon.api-brand-google-sheets{background:#fff!important;color:#16a34a!important;}
.api-card-logo.api-brand-openai,.api-card-icon.api-brand-openai{background:linear-gradient(145deg,#20c997,#087f5b)!important;color:#fff!important;}
.api-card-logo.api-brand-payments,.api-card-logo.api-brand-mercadopago,.api-card-icon.api-brand-payments{background:linear-gradient(145deg,#38bdf8,#0ea5e9)!important;color:#fff!important;}
.api-card-logo.api-brand-ifood,.api-card-icon.api-brand-ifood{background:linear-gradient(145deg,#ef4444,#dc2626)!important;color:#fff!important;}
.api-card-logo.api-brand-sefaz,.api-card-icon.api-brand-sefaz{background:linear-gradient(145deg,#8b5cf6,#5b21b6)!important;color:#fff!important;}
.api-card-logo.api-brand-hotmart,.api-card-icon.api-brand-hotmart{background:linear-gradient(145deg,#ff6a2a,#9b2c16)!important;color:#fff!important;}
.api-card-logo.api-brand-braip,.api-card-icon.api-brand-braip{background:linear-gradient(145deg,#7c3aed,#4c1d95)!important;color:#fff!important;}
.api-card-logo.api-brand-payt,.api-card-icon.api-brand-payt{background:linear-gradient(145deg,#36d399,#0f766e)!important;color:#fff!important;}
.api-card-logo.api-brand-ticto,.api-card-icon.api-brand-ticto{background:linear-gradient(145deg,#2dd4bf,#0891b2)!important;color:#fff!important;}
.api-card-logo.api-brand-perfectpay,.api-card-icon.api-brand-perfectpay{background:linear-gradient(145deg,#fb7185,#be123c)!important;color:#fff!important;}
.api-card-logo.api-brand-kirvano,.api-card-icon.api-brand-kirvano{background:linear-gradient(145deg,#38bdf8,#6366f1)!important;color:#fff!important;}
.api-card-logo.api-brand-meta,.api-card-logo.api-brand-meta-conversions,.api-card-icon.api-brand-meta,.api-card-icon.api-brand-meta-conversions{background:linear-gradient(145deg,#2563eb,#06b6d4)!important;color:#fff!important;}
.api-card-logo.api-brand-tracking-postback,.api-card-icon.api-brand-tracking-postback{background:linear-gradient(145deg,#f97316,#b45309)!important;color:#fff!important;}
.api-card-logo.api-brand-logistics-hub,.api-card-icon.api-brand-logistics-hub{background:linear-gradient(145deg,#60a5fa,#1d4ed8)!important;color:#fff!important;}
.api-card-logo.api-brand-melhor-envio,.api-card-icon.api-brand-melhor-envio{background:linear-gradient(145deg,#22c55e,#3b82f6)!important;color:#fff!important;}
.api-card-logo.api-brand-kangu,.api-card-icon.api-brand-kangu{background:linear-gradient(145deg,#ef4444,#f8fafc)!important;color:#fff!important;}
.api-card-logo.api-brand-jadlog,.api-card-icon.api-brand-jadlog{background:linear-gradient(145deg,#ef4444,#991b1b)!important;color:#fff!important;}
.api-card-logo.api-brand-correios,.api-card-icon.api-brand-correios{background:linear-gradient(145deg,#facc15,#2563eb)!important;color:#fff!important;}

.api-preview-add{border-color:rgba(174,111,240,.5);background:linear-gradient(145deg,rgba(174,111,240,.09),rgba(217,110,234,.035));color:#d8b4fe}.api-preview-add:hover{border-color:rgba(217,110,234,.75);box-shadow:0 0 26px rgba(174,111,240,.16)}
.api-preview-summary{gap:14px}.api-preview-kpi{background:linear-gradient(145deg,rgba(17,22,34,.9),rgba(8,11,18,.98));border-color:rgba(255,255,255,.075);border-radius:16px}.api-preview-kpi-icon{border-radius:15px}.api-preview-kpi.acc{color:#ae6ff0}.api-preview-kpi.green{color:#4ade80}.api-preview-kpi.yel{color:#fbbf24}.api-preview-kpi.blue{color:#60a5fa}.api-preview-kpi.danger{color:#f87171}


/* ============================================================
   API & Conexões — ajuste final de paleta, logos e responsividade
   ============================================================ */
.api-preview-page{
  min-width:0!important;
  width:100%;
  overflow-x:hidden;
  --fz-api-bg:#08080b;
  --fz-api-panel:#0d1018;
  --fz-api-panel-2:#101622;
  --fz-api-purple:#ae6ff0;
  --fz-api-pink:#d96eea;
  --fz-api-green:#4ade80;
}
.api-preview-top-actions .api-preview-user,
.api-preview-top-actions .api-preview-icon{display:none!important}
.api-preview-header{padding-right:4px}
.api-preview-page .panel,
.api-preview-left,
.api-preview-detail{
  background:radial-gradient(circle at 12% 0%,rgba(174,111,240,.075),transparent 28%),linear-gradient(145deg,rgba(13,16,24,.96),rgba(8,8,11,.985))!important;
  border-color:rgba(174,111,240,.16)!important;
}
.api-preview-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.api-preview-card-tile{
  min-width:0!important;
  min-height:132px!important;
  padding:14px 13px 12px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(15,20,31,.94),rgba(7,10,17,.985))!important;
  border-color:rgba(174,111,240,.13)!important;
}
.api-preview-card-tile.selected{
  border-color:rgba(174,111,240,.88)!important;
  box-shadow:0 0 0 1px rgba(217,110,234,.30),0 0 25px rgba(174,111,240,.16),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.api-card-logo{
  position:relative;
  width:44px!important;
  height:44px!important;
  border-radius:13px!important;
  margin-bottom:10px!important;
  overflow:hidden;
}
.api-logo-img{
  position:relative;
  z-index:2;
  width:72%;
  height:72%;
  object-fit:contain;
  display:block;
}
.api-logo-fallback{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:inherit;
}
.api-logo-fallback svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.api-card-logo:has(.api-logo-img[src$=".svg"]){background:linear-gradient(145deg,rgba(174,111,240,.28),rgba(217,110,234,.10))}
.api-preview-card-tile strong{font-size:14px!important;line-height:1.15!important}
.api-preview-card-tile em{font-size:11.5px!important}
.api-mini-status{margin-top:9px!important;padding:5px 9px!important;font-size:11px!important}
.api-selected-check{top:54px!important;right:11px!important;width:18px!important;height:18px!important}
.api-preview-top-actions .btn{height:38px!important}
.api-preview-chip{height:30px!important}
.api-preview-search-row{grid-template-columns:minmax(220px,1fr) 160px 38px 38px!important}

/* Paleta FlowZen nos cards e status */
.api-preview-chip.active,.api-preview-chip:hover,.api-preview-top-actions .btn-primary{
  background:linear-gradient(135deg,#ae6ff0,#7a47db 72%,#d96eea)!important;
  border-color:rgba(217,110,234,.36)!important;
}
.api-mini-status.green{background:rgba(74,222,128,.13)!important;color:#4ade80!important}
.api-mini-status.yel{background:rgba(251,191,36,.14)!important;color:#fbbf24!important}
.api-mini-status.acc{background:rgba(174,111,240,.17)!important;color:#d8b4fe!important}
.api-mini-status.danger{background:rgba(248,113,113,.14)!important;color:#f87171!important}

/* Espaço para logos reais: coloque arquivos em public/img/api-logos/{id}.svg, .webp ou .png */
.api-card-logo.api-brand-email .api-logo-img,
.api-card-logo.api-brand-google-calendar .api-logo-img,
.api-card-logo.api-brand-google-sheets .api-logo-img{width:74%;height:74%}

@media(max-width:1280px){
  .api-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:980px){
  .api-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .api-preview-search-row{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .api-preview-grid{grid-template-columns:1fr!important}
}

/* API & Conexões — limpeza funcional, paleta FlowZen e responsividade final */
.api-clean-page{
  --p-bg:#08080b!important;
  --p-panel:#0d1018!important;
  --p-panel2:#111521!important;
  --p-border:rgba(174,111,240,.16)!important;
  --p-purple:#ae6ff0!important;
  --p-purple2:#d96eea!important;
  --p-green:#4ade80!important;
  --p-yellow:#fbbf24!important;
  --p-blue:#60a5fa!important;
  --p-red:#f87171!important;
  min-width:0!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
.api-clean-page .panel,
.api-clean-page .api-preview-left,
.api-clean-page .api-preview-detail,
.api-clean-page .api-preview-card,
.api-clean-page .api-preview-kpi{
  background:linear-gradient(145deg,rgba(15,18,28,.96),rgba(8,8,11,.985))!important;
  border-color:rgba(174,111,240,.14)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.api-clean-page .api-preview-header{align-items:center!important}
.api-clean-page .api-preview-header h2{color:#fff!important;font-weight:850!important;letter-spacing:-.035em!important}
.api-clean-page .api-preview-top-actions .btn-primary,
.api-clean-page .api-preview-chip.active,
.api-clean-page .api-view-btn.active{
  background:linear-gradient(135deg,#ae6ff0,#8b5cf6 65%,#d96eea)!important;
  border-color:rgba(217,110,234,.5)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(174,111,240,.20)!important;
}
.api-clean-page .api-preview-workspace{
  grid-template-columns:minmax(0,1fr) minmax(380px,520px)!important;
  gap:16px!important;
  align-items:start!important;
  max-width:100%!important;
}
.api-clean-page .api-preview-left{min-width:0!important;padding:15px!important;overflow:hidden!important}
.api-clean-page .api-preview-detail{min-width:0!important;padding:15px!important;overflow:hidden!important}
.api-clean-page .api-preview-search-row{
  grid-template-columns:minmax(180px,1fr) 155px 38px 38px!important;
  gap:10px!important;
}
.api-clean-page .api-preview-search-row input,
.api-clean-page .api-preview-search-row select,
.api-clean-page .api-status-select,
.api-clean-page .api-notes-textarea,
.api-clean-page [data-api-tab-section] input{
  background:rgba(5,7,12,.9)!important;
  border:1px solid rgba(174,111,240,.18)!important;
  color:#f7f5ff!important;
  border-radius:11px!important;
}
.api-clean-page .api-status-select{width:100%;height:38px;margin-top:6px;padding:0 10px}
.api-clean-page .api-notes-textarea{width:100%;min-height:104px;padding:10px;resize:vertical;font:inherit}
.api-clean-page .api-preview-grid{
  grid-template-columns:repeat(auto-fit,minmax(188px,1fr))!important;
  gap:12px!important;
  max-width:100%!important;
}
.api-clean-page .api-preview-grid.api-list-view{grid-template-columns:1fr!important}
.api-clean-page .api-preview-grid.api-list-view .api-preview-card-tile{
  min-height:84px!important;
  display:grid!important;
  grid-template-columns:44px 1fr auto!important;
  grid-template-rows:auto auto!important;
  column-gap:12px!important;
  align-items:center!important;
}
.api-clean-page .api-preview-grid.api-list-view .api-card-logo{grid-row:1/3;margin:0!important}
.api-clean-page .api-preview-card-tile{
  min-width:0!important;
  min-height:125px!important;
  padding:13px 12px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(16,20,31,.92),rgba(7,10,17,.98))!important;
  border:1px solid rgba(174,111,240,.13)!important;
}
.api-clean-page .api-preview-card-tile:hover{border-color:rgba(174,111,240,.45)!important;transform:translateY(-1px)!important}
.api-clean-page .api-preview-card-tile.selected{
  border-color:rgba(174,111,240,.86)!important;
  box-shadow:0 0 0 1px rgba(217,110,234,.26),0 0 24px rgba(174,111,240,.15)!important;
}
.api-clean-page .api-card-menu{display:none!important}
.api-clean-page .api-card-logo{
  width:43px!important;height:43px!important;border-radius:13px!important;margin-bottom:10px!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.api-clean-page .api-logo-img{width:76%!important;height:76%!important;object-fit:contain!important}
.api-clean-page .api-logo-fallback svg{width:23px!important;height:23px!important;stroke-width:1.9!important}
.api-clean-page .api-preview-card-tile strong{font-size:14px!important;line-height:1.15!important;color:#fff!important}
.api-clean-page .api-preview-card-tile em{font-size:11.5px!important;color:#aab2c5!important}
.api-clean-page .api-card-note{display:block;color:#8f98ad;font-size:10.5px;margin-top:5px;line-height:1.25;max-height:28px;overflow:hidden}
.api-clean-page .api-mini-status{font-size:10.5px!important;padding:5px 9px!important;margin-top:8px!important}
.api-clean-page .api-mini-status.green{background:rgba(74,222,128,.13)!important;color:#4ade80!important}
.api-clean-page .api-mini-status.yel{background:rgba(251,191,36,.14)!important;color:#fbbf24!important}
.api-clean-page .api-mini-status.acc{background:rgba(174,111,240,.17)!important;color:#d8b4fe!important}
.api-clean-page .api-mini-status.danger{background:rgba(248,113,113,.14)!important;color:#f87171!important}
.api-clean-page .api-selected-check{right:12px!important;top:12px!important;background:#ae6ff0!important;color:#fff!important}
.api-clean-page .api-preview-detail-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
.api-clean-page .api-preview-card{min-height:auto!important;padding:13px!important;border-radius:13px!important}
.api-clean-page .api-preview-tabs{gap:16px!important;overflow:auto!important}
.api-clean-page .api-preview-tabs button.active{color:#d8b4fe!important}
.api-clean-page .api-preview-tabs button.active:after{background:linear-gradient(90deg,#ae6ff0,#d96eea)!important}
.api-clean-page .api-endpoints-list,.api-clean-page .api-webhook-list{display:grid;gap:8px}
.api-clean-page .api-endpoint,.api-clean-page .api-webhook-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:12px;color:#dbe2f4}
.api-clean-page .api-endpoint b{color:#60a5fa;margin-right:8px}
.api-clean-page .api-webhook-row i{display:inline-block;width:7px;height:7px;border-radius:999px;background:#4ade80;margin-right:7px}
.api-clean-page .api-preview-add,.api-clean-page .api-preview-user,.api-clean-page .api-preview-icon{display:none!important}
.api-clean-page .api-result-json{display:none!important}

/* Ícones fallback por marca/categoria seguindo a identidade visual do FlowZen */
.api-clean-page .api-brand-whatsapp{background:linear-gradient(145deg,#31d66b,#128c7e)!important;color:#fff!important}
.api-clean-page .api-brand-instagram{background:radial-gradient(circle at 25% 110%,#feda75 0 22%,transparent 23%),linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)!important;color:#fff!important}
.api-clean-page .api-brand-webhooks{background:linear-gradient(145deg,#ae6ff0,#6d38d7)!important;color:#fff!important}
.api-clean-page .api-brand-storage,.api-clean-page .api-brand-cloud-backup{background:linear-gradient(145deg,#60a5fa,#2563eb)!important;color:#fff!important}
.api-clean-page .api-brand-email{background:#fff!important;color:#2563eb!important}
.api-clean-page .api-brand-google-calendar{background:#fff!important;color:#4285f4!important}
.api-clean-page .api-brand-google-sheets{background:#fff!important;color:#16a34a!important}
.api-clean-page .api-brand-ecommerce,.api-clean-page .api-brand-ifood{background:linear-gradient(145deg,#fb923c,#f97316)!important;color:#fff!important}
.api-clean-page .api-brand-finance,.api-clean-page .api-brand-stock,.api-clean-page .api-brand-audit{background:linear-gradient(145deg,#34d399,#059669)!important;color:#fff!important}
.api-clean-page .api-brand-hotmart{background:linear-gradient(145deg,#ff7a2f,#e84a1a)!important;color:#fff!important}
.api-clean-page .api-brand-braip{background:linear-gradient(145deg,#8b5cf6,#5b21b6)!important;color:#fff!important}
.api-clean-page .api-brand-payt,.api-clean-page .api-brand-ticto{background:linear-gradient(145deg,#2dd4bf,#0ea5e9)!important;color:#fff!important}
.api-clean-page .api-brand-sefaz{background:linear-gradient(145deg,#7c3aed,#4338ca)!important;color:#fff!important}
.api-clean-page .api-brand-correios{background:linear-gradient(145deg,#facc15,#2563eb)!important;color:#fff!important}

@media(max-width:1500px){
  .api-clean-page .api-preview-workspace{grid-template-columns:1fr!important}
  .api-clean-page .api-preview-detail{max-width:none!important}
}
@media(max-width:760px){
  .api-clean-page .api-preview-search-row{grid-template-columns:1fr!important}
  .api-clean-page .api-preview-detail-grid{grid-template-columns:1fr!important}
  .api-clean-page .api-preview-header{align-items:flex-start!important;flex-direction:column!important}
}

/* API & Conexões — ajuste final: sem enfeite, cards menores e credenciais editáveis */
.api-clean-page .api-preview-workspace{
  grid-template-columns:minmax(0,1fr) minmax(360px,500px)!important;
  gap:14px!important;
}
.api-clean-page .api-preview-grid{
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr))!important;
  gap:10px!important;
}
.api-clean-page .api-preview-card-tile{
  min-height:112px!important;
  padding:11px!important;
  border-color:rgba(174,111,240,.16)!important;
}
.api-clean-page .api-card-logo{
  width:38px!important;height:38px!important;border-radius:12px!important;margin-bottom:8px!important;
}
.api-clean-page .api-logo-fallback svg{width:21px!important;height:21px!important}
.api-clean-page .api-preview-card-tile strong{font-size:13.5px!important}
.api-clean-page .api-preview-card-tile em{font-size:11px!important}
.api-clean-page .api-mini-status{font-size:10px!important;padding:4px 8px!important;margin-top:7px!important}
.api-clean-page .api-preview-left,.api-clean-page .api-preview-detail{overflow:visible!important}
.api-credential-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.api-credential-field{display:flex;flex-direction:column;gap:6px;margin:0!important}
.api-credential-field span{font-size:11px;color:#aeb5c8;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.api-credential-field input{height:38px;padding:0 10px;background:rgba(5,7,12,.9);border:1px solid rgba(174,111,240,.18);border-radius:10px;color:#f7f5ff;font:inherit;min-width:0}
.api-credential-field input:focus{outline:0;border-color:rgba(174,111,240,.72);box-shadow:0 0 0 3px rgba(174,111,240,.12)}
.api-credential-field small{font-size:10.5px;color:#8f98ad;line-height:1.25}
.api-clean-page .api-credential-row button{display:none!important}
@media(max-width:1380px){.api-clean-page .api-preview-workspace{grid-template-columns:1fr!important}.api-clean-page .api-preview-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important}}
@media(max-width:780px){.api-credential-editor{grid-template-columns:1fr}.api-clean-page .api-preview-search-row{grid-template-columns:1fr!important}}

/* FlowZen account menu integrado à logo/foto como acordeão interno */
.brand-account-shell{position:relative;display:block;margin-bottom:14px;z-index:20;border-radius:20px}
.account-identity-toggle{width:100%;display:grid;grid-template-columns:1fr 24px;align-items:center;gap:10px;text-align:left;border:1px solid rgba(174,111,240,.14);background:linear-gradient(145deg,rgba(22,22,34,.72),rgba(12,12,18,.46));border-radius:18px;padding:13px 12px 13px 12px;color:var(--text);cursor:pointer;transition:.18s ease;box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.012) inset}
.account-identity-toggle:hover,.account-identity-toggle.open{border-color:rgba(174,111,240,.34);background:linear-gradient(145deg,rgba(28,24,42,.84),rgba(13,13,20,.68));box-shadow:0 15px 36px rgba(0,0,0,.26),0 0 18px rgba(174,111,240,.07)}
.account-identity-toggle .logo{margin:0;padding:0;border-bottom:0;min-width:0;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:12px}
.account-logo-slot{pointer-events:none}
.account-photo-slot{position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:13px;align-self:center;margin-top:1px}
.account-photo-slot i{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:999px;background:var(--green);border:2px solid #15151f;box-shadow:0 0 11px rgba(74,222,128,.58)}
.account-identity-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;min-height:42px;padding:1px 0 0}
.account-identity-copy .logo-text,.account-identity-copy .logo-sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-identity-copy .logo-text{font-size:13.4px;font-weight:850;color:#fff;line-height:1.12;margin:0 0 4px}
.account-identity-copy .logo-sub{font-size:10.7px;color:var(--muted);line-height:1.18;margin:0}
.account-identity-copy small{display:none!important}
.account-menu-chevron{width:22px;height:22px;border-radius:999px;border:1px solid rgba(174,111,240,.24);display:inline-flex;align-items:center;justify-content:center;color:#cdb7ff;background:rgba(174,111,240,.055);font-size:13px;font-weight:800;transition:.18s ease;box-shadow:none;align-self:center;opacity:.9}
.account-identity-toggle:hover .account-menu-chevron{border-color:rgba(174,111,240,.42);background:rgba(174,111,240,.09);opacity:1}
.account-identity-toggle.open .account-menu-chevron{transform:rotate(180deg);border-color:rgba(174,111,240,.5);background:rgba(174,111,240,.11)}
.account-menu-panel{position:static;width:100%;display:none;margin-top:8px;padding:10px;border-radius:17px;border:1px solid rgba(174,111,240,.18);background:linear-gradient(145deg,rgba(20,20,31,.94),rgba(10,10,16,.92));box-shadow:0 14px 34px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.015) inset;backdrop-filter:blur(14px);overflow:hidden}
.account-menu-panel.open{display:block;animation:fzAccountMenuIn .16s ease-out}
.account-role-row{display:flex;align-items:center;justify-content:flex-start;padding:2px 3px 8px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.055)}
.account-role-row span{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(74,222,128,.22);background:rgba(74,222,128,.075);color:var(--green);font-weight:900;font-size:10.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-menu-item{width:100%;display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;text-align:left;padding:10px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;transition:.16s ease;font:inherit}
.account-menu-item:hover{background:rgba(174,111,240,.08);border-color:rgba(174,111,240,.16);transform:translateX(1px)}
.account-menu-item span{width:29px;height:29px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(174,111,240,.08);color:#a9a3c7;font-size:15px;border:1px solid rgba(174,111,240,.12)}

.account-menu-item svg{width:16px;height:16px;display:block;stroke:currentColor}
.account-menu-item:hover span{color:#cdb7ff;background:rgba(174,111,240,.12);border-color:rgba(174,111,240,.22)}
.account-menu-item.danger:hover span{color:var(--red);background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.22)}
.account-menu-item b{font-size:12.5px;color:#fff}
.account-menu-item em{font-size:10px;color:var(--muted);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:122px}
.account-menu-item:after{content:'›';justify-self:end;color:var(--muted);font-size:18px;line-height:1;opacity:.75}
.account-menu-item.danger{margin-top:5px;border-top:1px solid rgba(255,255,255,.04)}
.account-menu-item.danger span{background:rgba(248,113,113,.07);color:rgba(248,113,113,.9);border-color:rgba(248,113,113,.14)}
.account-menu-item.danger b{color:var(--red)}
@keyframes fzAccountMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.account-menu-chevron{width:23px;height:23px}}
.account-menu-item span{grid-row:1/3}.account-menu-item b{grid-column:2;grid-row:1}.account-menu-item em{grid-column:2;grid-row:2}.account-menu-item:after{grid-column:3;grid-row:1/3;align-self:center}

/* Fiscal / SEFAZ — etapa de segurança e clareza visual */
.fiscal-safe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.fiscal-safe-grid .status-box{height:100%;line-height:1.45}
@media (max-width:1100px){.fiscal-safe-grid{grid-template-columns:1fr}}

/* FlowZen — termos de primeiro acesso e avisos legais */
.legal-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.legal-page-head h1{margin-bottom:6px}
.legal-link-btn{border:1px solid rgba(174,111,240,.24);background:rgba(174,111,240,.06);color:#cdb7ff;border-radius:999px;padding:8px 12px;font-weight:850;font-size:12px;cursor:pointer;transition:.16s ease;white-space:nowrap}
.legal-link-btn:hover{border-color:rgba(174,111,240,.55);background:rgba(174,111,240,.12);color:#fff;transform:translateY(-1px)}
.legal-modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,5,11,.78);backdrop-filter:blur(12px);z-index:99999}
.legal-modal-overlay.open{display:flex}
.legal-modal{width:min(760px,96vw);max-height:90vh;display:flex;flex-direction:column;border-radius:22px;border:1px solid rgba(174,111,240,.24);background:linear-gradient(145deg,rgba(21,21,33,.98),rgba(9,10,17,.98));box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025) inset;color:var(--text);overflow:hidden}
.legal-modal-large{width:min(920px,96vw)}
.legal-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px;border-bottom:1px solid rgba(255,255,255,.07);background:linear-gradient(90deg,rgba(174,111,240,.12),rgba(34,211,238,.04))}
.legal-modal-head h2{font-size:19px;margin:0 0 5px;color:#fff;letter-spacing:-.02em}
.legal-modal-body{padding:18px 22px;overflow:auto;line-height:1.55;color:#d9deec}
.legal-modal-body .legal-intro{font-weight:850;color:#fff;margin-bottom:14px}
.legal-modal-body h3{font-size:14px;color:#fff;margin:18px 0 8px}
.legal-modal-body p{margin:0 0 10px;color:#d7dceb;font-size:13px}
.legal-check-row{display:flex;align-items:flex-start;gap:10px;margin:0 22px 16px;padding:12px;border:1px solid rgba(174,111,240,.18);border-radius:14px;background:rgba(174,111,240,.055);font-size:12.5px;line-height:1.45;color:#eef0ff;cursor:pointer}
.legal-check-row input{margin-top:3px;accent-color:#a855f7}
.legal-modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 22px 20px}
.legal-modal-actions .btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.35)}
@media(max-width:720px){.legal-modal-overlay{padding:12px}.legal-modal-head,.legal-modal-body{padding-left:16px;padding-right:16px}.legal-check-row{margin-left:16px;margin-right:16px}.legal-modal-actions{padding-left:16px;padding-right:16px;justify-content:stretch}.legal-modal-actions .btn{width:100%;justify-content:center}.legal-page-head{display:block}.legal-link-btn{margin-top:8px}}