/* Klicai/app/webai/assets/style.css */
/* ============ CORES ============ */
:root {
  --bg: #0d0d14;
  --surf: #13131e;
  --panel: #1a1a28;
  --border: #262638;
  --acc: #5eead4;
  --acc2: #818cf8;
  --acc3: #fb7185;
  --acc4: #fbbf24;
  --text: #e2e8f0;
  --muted: #64748b;
  --codebg: #0a0a12;
  --ln-bg: #111120;
  --ln-text: #3a3a5c;
  --ln-active: #5eead4;
  --r: 10px;
  --rsm: 6px;
  --top-h: 52px;
  --bot-h: 58px;
  --stat-h: 26px;
  --font-ui: 'DM Sans', sans-serif;
  --font-code: 'JetBrains Mono', monospace;
}
[data-theme="light"] {
  --bg: #f0f2f8;
  --surf: #ffffff;
  --panel: #f5f6fc;
  --border: #dde1f0;
  --acc: #0d9488;
  --acc2: #6366f1;
  --acc3: #e11d48;
  --acc4: #d97706;
  --text: #1e2030;
  --muted: #6b7280;
  --codebg: #f8f9fe;
  --ln-bg: #f0f2f8;
  --ln-text: #9ca3af;
  --ln-active: #0d9488;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
  overflow:hidden;
  transition:background .25s,color .25s;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ===== TOPBAR ===== */
#topbar {
  position:fixed; top:0; left:0; right:0; height:var(--top-h);
  background:var(--surf); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:0; padding:0 16px;
  z-index:2147483647; transition:background .25s,border-color .25s;
}
#topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--acc) 30%,var(--acc2) 70%,transparent 100%);
  opacity:.5;
}
#tb-left{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
#tb-center{display:flex;align-items:center;gap:5px;position:absolute;left:50%;transform:translateX(-50%)}
#tb-right{display:flex;align-items:center;gap:5px;flex:1;justify-content:flex-end;min-width:0}

.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex-shrink:0}
.logo-mark{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(94,234,212,.25)
}
.logo-mark img{width:100%;height:100%;display:block;object-fit:cover}
.logo-mark svg{width:17px;height:17px;color:#fff}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-size:.95rem;font-weight:700;letter-spacing:-.3px}
.logo-name em{font-style:normal;color:var(--acc)}
.logo-tag{font-size:.58rem;font-weight:500;color:var(--muted);letter-spacing:.2px}

#file-badge{
  display:flex;align-items:center;gap:4px;padding:3px 9px;border-radius:100px;
  background:var(--panel);border:1px solid var(--border);
  font-size:.62rem;font-weight:700;color:var(--muted);white-space:nowrap;
  font-family:var(--font-code);letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;
  min-width:0;max-width:220px
}
#auto-badge{
  display:none;align-items:center;gap:5px;padding:3px 9px;border-radius:100px;
  background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.22);
  font-size:.63rem;font-weight:700;color:var(--acc);white-space:nowrap;flex-shrink:0;letter-spacing:.3px
}
#auto-badge.on{display:flex}
#auto-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--acc);animation:pulse 1.5s infinite}

.tb-div{width:1px;height:22px;background:var(--border);margin:0 4px;flex-shrink:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 13px;border-radius:var(--rsm);
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  font-family:var(--font-ui);font-size:.78rem;font-weight:600;cursor:pointer;
  transition:all .15s;white-space:nowrap;line-height:1;
  -webkit-user-select:none;user-select:none;flex-shrink:0
}
.btn svg{width:14px;height:14px;flex-shrink:0;stroke-width:1.75}
.btn:hover{border-color:var(--acc);color:var(--acc);background:rgba(94,234,212,.06)}
.btn:active{transform:scale(.95)}
.btn.run{
  background:linear-gradient(135deg,var(--acc) 0%,var(--acc2) 100%);
  border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 2px 14px rgba(94,234,212,.3)
}
.btn.run:hover{box-shadow:0 4px 20px rgba(94,234,212,.45);color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.btn.run.modo-treino{
  background:linear-gradient(135deg,var(--acc4) 0%,#f97316 100%);
  box-shadow:0 2px 14px rgba(251,191,36,.35)
}
.btn.run.modo-treino:hover{box-shadow:0 4px 20px rgba(251,191,36,.5);background:linear-gradient(135deg,var(--acc4),#f97316)}
.btn.run.upsell-pro{
  background:linear-gradient(135deg,var(--acc2) 0%,#c084fc 100%);
  box-shadow:0 2px 14px rgba(129,140,248,.35)
}
.btn.run.upsell-pro:hover{box-shadow:0 4px 20px rgba(129,140,248,.5);background:linear-gradient(135deg,var(--acc2),#c084fc)}
.btn.run.trial-gratis{
  background:linear-gradient(135deg,#16a34a 0%,#15803d 100%);
  box-shadow:0 2px 14px rgba(21,128,61,.4)
}
.btn.run.trial-gratis:hover{box-shadow:0 4px 20px rgba(21,128,61,.55);background:linear-gradient(135deg,#16a34a,#166534)}
.btn.paste{border-color:rgba(129,140,248,.3);color:var(--acc2)}
.btn.paste:hover{border-color:var(--acc2);background:rgba(129,140,248,.08);color:var(--acc2)}
.btn.del{border-color:rgba(251,113,133,.25);color:var(--acc3)}
.btn.del:hover{border-color:var(--acc3);background:rgba(251,113,133,.08);color:var(--acc3)}
.btn.save-btn{border-color:rgba(251,191,36,.25);color:var(--acc4)}
.btn.save-btn:hover{border-color:var(--acc4);background:rgba(251,191,36,.08);color:var(--acc4)}
.btn.export-btn{border-color:rgba(94,234,212,.25);color:var(--acc)}
.btn.export-btn:hover{border-color:var(--acc);background:rgba(94,234,212,.08);color:var(--acc)}
.btn.ico{padding:7px 9px}

#ham{
  width:34px;height:34px;border-radius:var(--rsm);
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s
}
#ham svg{width:16px;height:16px;stroke-width:2}
#ham:hover{border-color:var(--acc);color:var(--acc)}

/* ===== FAIXA DE AVISO ===== */
.faixa-aviso { display:none; padding:9px 16px; font-size:.82em; text-align:center; font-weight:600; margin-top:var(--top-h); }
.faixa-aviso.show { display:block; }
.faixa-aviso.graca { background:rgba(251,191,36,.15); color:var(--acc4); border-bottom:1px solid rgba(251,191,36,.3); }
.faixa-aviso.venceu { background:rgba(251,113,133,.15); color:var(--acc3); border-bottom:1px solid rgba(251,113,133,.3); }
.faixa-aviso.trial { background:rgba(94,234,212,.15); color:var(--acc); border-bottom:1px solid rgba(94,234,212,.3); }
.faixa-aviso a { text-decoration:underline; }

/* ===== APP BODY ===== */
.app-body { display:flex; flex-direction:column; height:calc(100vh - var(--top-h) - var(--stat-h)); margin-top:var(--top-h); }

/* ============ BARRA DE INSTALAÇÃO (PWA) ============ */
:root { --pwa-barra-h: 60px; }
#pwaBarra {
  display:none; position:fixed; top:var(--top-h); left:0; right:0; z-index:2147483000;
  align-items:center; justify-content:space-between; gap:14px;
  padding:10px 16px; min-height:var(--pwa-barra-h);
  background:var(--surf); color:var(--text);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
#pwaBarra.show { display:flex; animation:pwaDescer .3s ease; }
@keyframes pwaDescer { from{ transform:translateY(-100%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
body.pwa-barra-ativa .app-body { margin-top:calc(var(--top-h) + var(--pwa-barra-h)); height:calc(100vh - var(--top-h) - var(--stat-h) - var(--pwa-barra-h)); }
.pwa-barra-texto { display:flex; align-items:center; gap:11px; min-width:0; }
.pwa-barra-texto img { border-radius:8px; flex-shrink:0; }
.pwa-barra-texto div { display:flex; flex-direction:column; min-width:0; }
.pwa-barra-texto strong { color:var(--text); font-size:.86rem; font-weight:800; line-height:1.25; }
.pwa-barra-texto span { color:var(--muted); font-size:.72rem; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pwa-barra-acoes { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pwa-btn-instalar {
  background:linear-gradient(135deg,var(--acc) 0%,var(--acc2) 100%); color:#fff; border:none;
  padding:9px 18px; border-radius:100px;
  font-family:var(--font-ui); font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap;
  box-shadow:0 3px 12px rgba(94,234,212,.3);
  transition:transform .15s, box-shadow .15s;
}
.pwa-btn-instalar:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(94,234,212,.4); }
.pwa-btn-fechar {
  background:var(--panel); border:1px solid var(--border); color:var(--muted);
  width:30px; height:30px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all .15s;
}
.pwa-btn-fechar svg { width:15px; height:15px; }
.pwa-btn-fechar:hover { border-color:var(--acc3); color:var(--acc3); }
@media(max-width:520px) {
  .pwa-barra-texto span { display:none; }
  #pwaBarra { padding:8px 12px; }
}
.app-body.tem-faixa { margin-top:0; height:calc(100vh - var(--top-h) - var(--stat-h) - var(--faixa-h, 38px)); }

body.oculta-statusbar #sb { display:none; }
body.oculta-statusbar .app-body { height:calc(100vh - var(--top-h)); }
body.oculta-statusbar .app-body.tem-faixa { margin-top:0; height:calc(100vh - var(--top-h) - var(--faixa-h, 38px)); }

#wrap { flex:1; display:flex; overflow:hidden; background:var(--bg); color:var(--text); transition:background .25s,color .25s; }

/* ===== SIDEBAR PRO ===== */
#sidebarPro {
  width:240px; background:var(--surf); border-right:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0; overflow:hidden;
}
.sidebar-topo { padding:10px 12px; border-bottom:1px solid var(--border); display:flex; gap:6px; flex-wrap:wrap; }
.sidebar-topo button {
  flex:1; font-size:.7em; font-family:var(--font-code);
  background:var(--panel); border:1px solid var(--border); color:var(--muted);
  border-radius:var(--rsm); padding:6px 4px; display:flex; align-items:center; justify-content:center; gap:4px;
  min-width:60px;
}
.sidebar-topo button:hover { color:var(--text); border-color:var(--acc); }
.sidebar-projeto {
  padding:9px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--panel);
}
.sidebar-projeto-lbl {
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-right:2px;
}
.sidebar-projeto button {
  display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--rsm); border:1px solid var(--border);
  background:var(--surf); color:var(--muted); font-size:.76rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.sidebar-projeto button:hover { color:var(--text); border-color:var(--acc); }
#btn-import-projeto:hover { border-color:var(--acc2); color:var(--acc2); }
.arvore { flex:1; overflow-y:auto; padding:8px; }
.arvore-item {
  display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:var(--rsm);
  font-size:.8em; cursor:pointer; color:var(--muted); position:relative;
}
.arvore-item:hover { background:var(--panel); color:var(--text); }
.arvore-item.ativo { background:rgba(94,234,212,.12); color:var(--acc); }
.arvore-item i.icone-tipo { width:14px; text-align:center; flex-shrink:0; }
.arvore-item .nome {
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:default;
}
.arvore-item .nome-input {
  width:100%;
  background:var(--bg);
  border:1px solid var(--acc);
  border-radius:4px;
  color:var(--text);
  padding:2px 4px;
  font-family:var(--font-code);
  font-size:.8em;
  outline:none;
}
.arvore-item .btn-renomear-item { opacity:0; font-size:.85em; color:var(--muted); padding:2px 4px; background:transparent; border:none; }
.arvore-item:hover .btn-renomear-item { opacity:1; }
.arvore-item .btn-renomear-item:hover { color:var(--acc); }
.arvore-item .btn-excluir-item { opacity:0; font-size:.85em; color:var(--muted); padding:2px 4px; background:transparent; border:none; }
.arvore-item:hover .btn-excluir-item { opacity:1; }
.arvore-item .btn-excluir-item:hover { color:var(--acc3); }
.arvore-pasta-filhos { padding-left:16px; display:none; }
.arvore-pasta-filhos.show-filhos { display:block; }
.arvore-vazio { text-align:center; color:var(--muted); font-size:.78em; padding:30px 10px; }
.arvore-item.arrastando { opacity:.4; }
.arvore-item.drop-alvo { background:rgba(94,234,212,.15); outline:1px dashed var(--acc); outline-offset:-1px; }
.arvore.drop-alvo-raiz { background:rgba(94,234,212,.05); outline:1px dashed var(--acc); outline-offset:-3px; }

/* ===== EDITOR ===== */
#ep {
  display:flex; flex-direction:column; flex:1; min-width:260px;
  border-right:1px solid var(--border); background:var(--surf);
  transition:background .25s; overflow:hidden;
}
#ep.closed { width:0!important; min-width:0; border-right:none; }

.phead {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 14px; border-bottom:1px solid var(--border);
  background:var(--panel); flex-shrink:0;
  flex-wrap:wrap;
}
.phead-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.plbl {
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:1.8px;
  color:var(--muted); display:flex; align-items:center; gap:6px;
}
.plbl::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 8px var(--acc); flex-shrink:0;
}
.pill {
  background:rgba(94,234,212,.1); border:1px solid rgba(94,234,212,.2);
  color:var(--acc); font-size:.63rem; font-weight:700; padding:2px 8px;
  border-radius:100px; font-family:var(--font-code);
}
.editor-tabs {
  display:flex;
  gap:4px;
  margin-left:8px;
  border-left:1px solid var(--border);
  padding-left:8px;
}
.editor-tabs .tab-btn {
  background:transparent;
  border:1px solid transparent;
  border-radius:4px;
  padding:3px 10px;
  font-size:.7rem;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:all .15s;
  font-family:var(--font-ui);
}
.editor-tabs .tab-btn:hover {
  color:var(--text);
  border-color:var(--border);
}
.editor-tabs .tab-btn.active {
  background:var(--acc);
  color:#fff;
  border-color:var(--acc);
}
.editor-actions { display:flex; align-items:center; gap:4px; margin-left:6px; }
.editor-actions .pact {
  width:26px; height:26px; border-radius:5px; border:1px solid transparent;
  background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0;
}
.editor-actions .pact svg { width:13px; height:13px; stroke-width:2; }
.editor-actions .pact:hover { background:var(--border); color:var(--acc); border-color:var(--border); }
.phead-acts { display:flex; align-items:center; gap:4px; }
.phead-acts .pact {
  width:26px; height:26px; border-radius:5px; border:1px solid transparent;
  background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0;
}
.phead-acts .pact svg { width:13px; height:13px; stroke-width:2; }
.phead-acts .pact:hover { background:var(--border); color:var(--acc); border-color:var(--border); }

#editor-content {
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
#editor-wrap {
  flex:1;
  display:flex;
  overflow:hidden;
  background:var(--codebg);
  transition:background .25s;
}
#data-panel {
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--codebg);
  overflow:hidden;
}
.data-toolbar {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  flex-wrap:wrap;
}
.data-toolbar-acts {
  display:flex;
  gap:6px;
  margin-left:auto;
}
.data-toolbar-acts .pact {
  width:32px; height:32px; border-radius:8px; border:1px solid var(--border);
  background:var(--surf); color:var(--muted); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s;
}
.data-toolbar-acts .pact svg { width:16px; height:16px; }
.data-toolbar-acts .pact:hover { border-color:var(--acc); color:var(--acc); }
#btn-import-sql:hover { border-color:var(--acc2); color:var(--acc2); }
.sql-modal-arquivo {
  display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:9px 12px;
  border:1px dashed var(--border); border-radius:var(--rsm); font-size:.8rem; color:var(--muted);
  cursor:pointer; transition:all .15s;
}
.sql-modal-arquivo:hover { border-color:var(--acc); color:var(--acc); }
.sql-modal-arquivo i { color:var(--acc); }
#db-info-card {
  padding:12px 14px; background:var(--panel);
  border:1px solid var(--border); border-radius:var(--r); position:relative;
}
.db-info-linha { display:flex; align-items:center; gap:8px; font-size:.78rem; padding:3px 0; }
.db-info-lbl { width:64px; flex-shrink:0; color:var(--muted); font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; }
.db-info-val { font-family:var(--font-code); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.db-info-olho { background:transparent; border:none; color:var(--muted); cursor:pointer; padding:2px 4px; flex-shrink:0; }
.db-info-olho:hover { color:var(--acc); }
.db-info-editar {
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:6px 12px;
  border-radius:var(--rsm); border:1px solid var(--border); background:var(--bg);
  color:var(--muted); font-size:.72rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.db-info-editar:hover { border-color:var(--acc); color:var(--acc); }

/* ---- Sanfona: dados de conexão, fechada por padrão ---- */
.db-acordeao { margin:10px 14px 0; flex-shrink:0; }
.db-acordeao-cabecalho {
  width:100%; display:flex; align-items:center; gap:9px; padding:10px 14px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); font-size:.8rem; font-weight:700; cursor:pointer; transition:border-color .15s;
}
.db-acordeao-cabecalho:hover { border-color:var(--acc); }
.db-acordeao-cabecalho i:first-child { color:var(--acc); font-size:.8rem; }
.db-acordeao-cabecalho span { flex:1; text-align:left; }
.db-acordeao-seta { color:var(--muted); font-size:.72rem; transition:transform .2s; }
.db-acordeao.aberto .db-acordeao-cabecalho { border-radius:var(--r) var(--r) 0 0; border-bottom-color:transparent; }
.db-acordeao.aberto .db-acordeao-seta { transform:rotate(180deg); }
.db-acordeao-corpo {
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  background:var(--panel); border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--r) var(--r);
}
.db-acordeao.aberto .db-acordeao-corpo { max-height:280px; }
.db-acordeao-corpo #db-info-card { border:none; border-radius:0; background:transparent; padding:12px 14px; }

/* ---- Tabelas: dropdown de seleção ---- */
.tabelas-bloco { margin:14px 14px 0; flex-shrink:0; }
.tabelas-bloco-topo { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.tabelas-bloco-topo label {
  display:flex; align-items:center; gap:7px; font-size:.7rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px;
}
.tabelas-bloco-topo label i { color:var(--acc); }
.tabela-acoes-sel { display:flex; align-items:center; gap:2px; }
#selectTabela {
  width:100%; background:var(--panel); border:1px solid var(--border); border-radius:var(--rsm);
  color:var(--text); padding:10px 12px; font-family:var(--font-code); font-size:.82rem;
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
  padding-right:34px;
}
#selectTabela:focus { outline:none; border-color:var(--acc); }
.tabela-desc-sel {
  font-size:.72rem; color:var(--muted); margin-top:7px; padding:2px 2px; cursor:text;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tabela-desc-sel.vazia { font-style:italic; opacity:.7; }
.tabela-desc-sel input {
  width:100%; background:var(--surf); border:1px solid var(--border); border-radius:4px;
  color:var(--text); padding:4px 7px; font-size:.72rem; outline:none;
}
.tabela-acao {
  width:26px; height:26px; border-radius:5px; border:none; background:transparent;
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.78em; transition:all .15s;
}
.tabela-acao:hover { background:var(--border); color:var(--acc); }
.tabela-acao.del:hover { color:var(--acc3); }
#data-grid-wrapper {
  flex:1;
  overflow:auto;
  padding:10px;
}
#data-grid {
  width:100%;
  font-family:var(--font-code);
  font-size:.75rem;
  border-collapse:collapse;
}
#data-grid th,
#data-grid td {
  padding:6px 10px;
  border:1px solid var(--border);
  text-align:left;
  white-space:nowrap;
}
#data-grid th {
  background:var(--panel);
  color:var(--muted);
  position:sticky;
  top:0;
  z-index:2;
}
#data-grid tr:nth-child(even) {
  background:rgba(255,255,255,.03);
}
#data-grid .empty-msg {
  padding:30px;
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
}

#line-nums {
  width:52px; min-width:52px; background:var(--ln-bg);
  border-right:1px solid var(--border); overflow:hidden;
  padding:14px 0; font-family:var(--font-code); font-size:.75rem;
  line-height:1.75; color:var(--ln-text); text-align:right;
  user-select:none; -webkit-user-select:none; flex-shrink:0;
  transition:background .25s,color .25s;
}
.ln-item { padding:0 10px 0 8px; display:block; height:calc(1.75em); line-height:1.75; transition:color .1s; cursor:default; font-size:.75rem; }
.ln-item.active { color:var(--ln-active); font-weight:700; }
#ed {
  flex:1; padding:14px 16px; background:transparent; border:none; outline:none;
  color:var(--text); font-family:var(--font-code); font-size:.78rem; line-height:1.75;
  resize:none; caret-color:var(--acc); overflow-y:auto; tab-size:2;
  -webkit-overflow-scrolling:touch; transition:color .25s;
}
#ed::placeholder { color:var(--muted); font-style:italic; font-size:.75rem; }

/* ===== RESIZER ===== */
#rz {
  width:4px; background:var(--border); cursor:col-resize; flex-shrink:0;
  transition:background .2s,width .2s; position:relative;
}
#rz::after {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:3px; height:36px; border-radius:4px; background:var(--border); transition:all .2s;
}
#rz:hover::after, #rz.drag::after { background:var(--acc); box-shadow:0 0 8px var(--acc); width:3px; }

/* ===== PREVIEW ===== */
#pp { display:flex; flex-direction:column; flex:1; overflow:hidden; }
.pvhead {
  display:flex; align-items:center; gap:8px; padding:7px 12px;
  background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0;
}
.wdots { display:flex; gap:5px; flex-shrink:0; }
.wd { width:10px; height:10px; border-radius:50%; }
.wd.r { background:#ff5f57; } .wd.y { background:#febc2e; } .wd.g { background:#28c840; }
#ubar {
  flex:1; background:var(--codebg); border:1px solid var(--border); border-radius:5px;
  padding:4px 10px; font-family:var(--font-code); font-size:.65rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
#vp { flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; padding:20px; background:var(--bg); transition:background .25s; }
[data-theme="dark"] #vp {
  background-image: radial-gradient(ellipse 60% 50% at 20% 80%, rgba(129,140,248,.05) 0%, transparent 60%),
                   radial-gradient(ellipse 50% 60% at 80% 20%, rgba(94,234,212,.05) 0%, transparent 60%);
}
#dfwrap { position:relative; flex:1; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
#df { transition:all .3s cubic-bezier(.4,0,.2,1); background:#fff; }
#df.desktop { width:100%; height:100%; border-radius:var(--r); box-shadow:0 20px 60px rgba(0,0,0,.2); }
[data-theme="light"] #df.desktop { box-shadow:0 8px 40px rgba(0,0,0,.1); }
#df.tablet { width:768px; height:540px; border-radius:14px; border:12px solid #1c1c2e; box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 30px 70px rgba(0,0,0,.5); }
#df.phone { width:375px; height:667px; border-radius:42px; border:14px solid #1c1c2e; box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 30px 70px rgba(0,0,0,.5); }
#pif { width:100%; height:100%; border:none; display:block; border-radius:inherit; }
#es {
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:var(--muted); font-size:.82rem; text-align:center; padding:24px;
}
.es-ic { width:64px; height:64px; border-radius:16px; background:var(--panel); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:4px; }
.es-t { font-weight:700; font-size:.95rem; color:var(--text); }
kbd { display:inline-block; background:var(--codebg); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-family:var(--font-code); font-size:.63rem; color:var(--muted); }
#pload {
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.18); border-radius:inherit; z-index:10;
  flex-direction:column; gap:10px; backdrop-filter:blur(4px);
}
#pload.on { display:flex; }
.spin { width:30px; height:30px; border:2.5px solid rgba(94,234,212,.15); border-top-color:var(--acc); border-radius:50%; animation:spin .65s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#pload p { color:var(--acc); font-size:.75rem; font-weight:600; font-family:var(--font-ui); letter-spacing:.3px; }

/* ===== ERROR BAR ===== */
#errbar {
  display:none; flex-shrink:0; align-items:center; gap:8px; padding:6px 14px;
  background:rgba(251,113,133,.08); border-top:1px solid rgba(251,113,133,.25);
  font-family:var(--font-code); font-size:.68rem; color:var(--acc3);
}
#errbar.on { display:flex; }
#errbar svg { width:12px; height:12px; flex-shrink:0; stroke-width:2; }
#errbar span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#errbar button { background:none; border:none; color:var(--acc3); cursor:pointer; opacity:.6; font-size:1rem; line-height:1; padding:0 3px; transition:opacity .15s; }
#errbar button:hover { opacity:1; }

/* ===== STATUS BAR ===== */
#sb {
  position:fixed; bottom:0; left:0; right:0; height:var(--stat-h);
  background:var(--codebg); border-top:1px solid var(--border);
  display:flex; align-items:center; padding:0 16px; gap:16px;
  z-index:9000; font-family:var(--font-code); font-size:.64rem; color:var(--muted);
  transition:background .25s;
}
.si { display:flex; align-items:center; gap:5px; }
.sd { width:5px; height:5px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.sd.live { background:var(--acc); box-shadow:0 0 6px var(--acc); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.sb-sep { width:1px; height:12px; background:var(--border); }
.sb-brand { display:flex; align-items:center; gap:5px; font-family:var(--font-ui); font-weight:700; font-size:.65rem; color:var(--acc); }

/* ===== BOTTOM NAV (mobile) ===== */
#bnav { display:none; position:fixed; left:0; right:0; bottom:0; height:var(--bot-h); background:var(--surf); border-top:1px solid var(--border); align-items:stretch; padding-bottom:env(safe-area-inset-bottom,0); flex-shrink:0; z-index:8000; }
.bnb { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:none; background:transparent; color:var(--muted); font-family:var(--font-ui); font-size:.58rem; font-weight:600; cursor:pointer; transition:color .15s; padding:6px 0; }
.bnb svg { width:19px; height:19px; stroke-width:2; }
.bnb.on { color:var(--acc); }
.bnb:active { opacity:.7; }
.bnb-sep { width:1px; background:var(--border); margin:10px 0; flex-shrink:0; }

/* ===== DRAWER ===== */
#dbk { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50000; backdrop-filter:blur(3px); }
#dbk.on { display:block; }
#dr {
  position:fixed; top:0; right:-310px; width:300px; height:100%;
  background:var(--surf); border-left:1px solid var(--border); z-index:50001;
  display:flex; flex-direction:column; transition:right .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#dr.on { right:0; }
.drh { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.drt { font-weight:700; font-size:.9rem; color:var(--text); display:flex; align-items:center; gap:9px; }
.drt-icon { width:28px; height:28px; border-radius:7px; background:linear-gradient(135deg,var(--acc),var(--acc2)); display:flex; align-items:center; justify-content:center; }
.drt-icon svg { width:14px; height:14px; color:#fff; stroke-width:2; }
.drc { width:32px; height:32px; border-radius:7px; border:1px solid var(--border); background:var(--panel); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.drc:hover { color:var(--acc3); border-color:var(--acc3); }
.drc svg { width:14px; height:14px; stroke-width:2; }
.drs { padding:14px 18px 6px; }
.drsl { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.drsl::before { content:''; width:3px; height:11px; border-radius:2px; background:var(--acc2); }
.drb {
  display:flex; align-items:center; gap:11px; width:100%; padding:11px 14px; border-radius:var(--rsm);
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  font-family:var(--font-ui); font-size:.83rem; font-weight:600; cursor:pointer;
  margin-bottom:7px; transition:all .15s; text-align:left;
}
.drb svg { width:16px; height:16px; flex-shrink:0; stroke-width:1.75; color:var(--muted); }
.drb:hover, .drb:active { border-color:var(--acc); color:var(--acc); background:rgba(94,234,212,.05); }
.drb:hover svg { color:var(--acc); }
.drb.rund { background:linear-gradient(135deg,var(--acc),var(--acc2)); border-color:transparent; color:#fff; font-weight:700; }
.drb.rund svg { color:#fff; }
.drb.rund:hover { box-shadow:0 4px 20px rgba(94,234,212,.3); color:#fff; }
.drb.pastd { border-color:rgba(129,140,248,.3); color:var(--acc2); }
.drb.pastd svg { color:var(--acc2); }
.drb.pastd:hover { border-color:var(--acc2); background:rgba(129,140,248,.07); color:var(--acc2); }
.drb.deld { border-color:rgba(251,113,133,.25); color:var(--acc3); }
.drb.deld svg { color:var(--acc3); }
.drb.deld:hover { border-color:var(--acc3); background:rgba(251,113,133,.07); }
.drb.savd { border-color:rgba(251,191,36,.25); color:var(--acc4); }
.drb.savd svg { color:var(--acc4); }
.drb.savd:hover { border-color:var(--acc4); background:rgba(251,191,36,.07); }
.drdrow { display:flex; gap:7px; margin-bottom:8px; }
.ddb {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 6px; border-radius:var(--rsm); border:1px solid var(--border);
  background:var(--panel); color:var(--muted); font-family:var(--font-ui);
  font-size:.65rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.ddb svg { width:20px; height:20px; stroke-width:1.75; }
.ddb.on, .ddb:hover { border-color:var(--acc); color:var(--acc); background:rgba(94,234,212,.06); }
.pvhead-dispositivos { display:flex; align-items:center; gap:2px; padding:2px; border-radius:var(--rsm); background:var(--panel); border:1px solid var(--border); flex-shrink:0; }
.pvhead-dispositivos .ddb { flex:none; padding:5px 7px; border:none; background:transparent; }
.pvhead-dispositivos .ddb svg { width:15px; height:15px; }
.pvhead-dispositivos .ddb.on, .pvhead-dispositivos .ddb:hover { background:var(--border); color:var(--acc); }
.dtrow { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:var(--rsm); border:1px solid var(--border); background:var(--panel); margin-bottom:8px; cursor:pointer; transition:all .15s; }
.dtrow:hover { border-color:var(--acc); }
.dtlbl { font-size:.82rem; font-weight:600; color:var(--text); }
.ttrack { width:40px; height:22px; border-radius:100px; background:var(--border); position:relative; transition:background .2s; flex-shrink:0; }
.ttrack.on { background:var(--acc); }
.tthumb { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.ttrack.on .tthumb { left:21px; }

/* ===== FULLSCREEN ===== */
#fsov { display:none; position:fixed; inset:0; z-index:2147483646; flex-direction:column; background:#fff; }
#fsov.on { display:flex; }
#fstop { display:flex; align-items:center; gap:8px; padding:0 16px; height:var(--top-h); background:var(--surf); border-bottom:1px solid var(--border); flex-shrink:0; }
#fsif { flex:1; width:100%; border:none; }
#fs-float-close {
  position:fixed; top:calc(var(--top-h) + 14px); right:16px; z-index:2147483647;
  width:40px; height:40px; border-radius:50%;
  background:rgba(13,13,20,.85); border:1px solid rgba(255,255,255,.1); color:#fff;
  display:none; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(8px); transition:all .2s; box-shadow:0 4px 20px rgba(0,0,0,.4);
}
#fsov.on ~ #fs-float-close { display:flex; }
#fs-float-close svg { width:16px; height:16px; stroke-width:2.5; }
#fs-float-close:hover { background:rgba(251,113,133,.8); border-color:rgba(251,113,133,.5); transform:scale(1.08); }

/* ===== MODAIS ===== */
#modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999999; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
#modal-bg.on { display:flex; }
#modal { background:var(--surf); border:1px solid var(--border); border-radius:16px; padding:28px; max-width:340px; width:92%; box-shadow:0 30px 80px rgba(0,0,0,.4); }
#modal h3 { font-size:.95rem; font-weight:700; margin-bottom:8px; color:var(--text); }
#modal p { font-size:.82rem; color:var(--muted); margin-bottom:22px; line-height:1.6; }
.modal-btns { display:flex; gap:8px; }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999998; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.modal-overlay.show { display:flex; }
.modal-caixa { background:var(--surf); border:1px solid var(--border); border-radius:var(--r); padding:22px; width:340px; max-width:92vw; max-height:88vh; overflow-y:auto; }
.modal-caixa h3 { font-family:var(--font-ui); font-size:1em; margin-bottom:14px; }

/* Título de cada painel (Editor/Visualização/Arquivos/Banco de Dados) — só aparece no mobile */
.painel-titulo-mobile { display:none; align-items:center; gap:7px; font-size:.78rem; font-weight:700; color:var(--muted); }
.painel-titulo-mobile i { color:var(--acc); font-size:.75rem; }

/* Cabeçalho do modal SQL: título + colar/copiar/eliminar lado a lado */
.sql-modal-topo { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.sql-modal-topo h3 { margin:0; }
.modal-caixa input, .modal-caixa textarea {
  width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:var(--rsm); padding:10px 12px; font-family:var(--font-code); font-size:.85em; margin-bottom:14px;
}
.modal-caixa textarea { min-height:100px; }
.modal-acoes { display:flex; gap:8px; justify-content:flex-end; }
.modal-acoes button { padding:8px 16px; border-radius:var(--rsm); font-size:.82em; font-weight:600; border:1px solid var(--border); background:transparent; color:var(--muted); }
.modal-acoes button.primario { background:var(--acc2); color:#fff; border-color:var(--acc2); }
.modal-erro { color:var(--acc3); font-size:.78em; margin-top:-8px; margin-bottom:12px; display:none; }
.modal-erro.show { display:block; }
.sql-msg { padding:8px 12px; border-radius:var(--rsm); margin-bottom:8px; }
.sql-msg.ok { background:rgba(94,234,212,.1); color:var(--acc); }
.sql-msg.erro { background:rgba(251,113,133,.1); color:var(--acc3); }
.onboarding-caixa { width:380px; position:relative; }
.onboarding-sub { font-size:.82em; color:var(--muted); line-height:1.5; margin:-6px 0 14px; }
.sugestao-link { background:transparent; border:none; color:var(--acc); text-decoration:underline; cursor:pointer; font-weight:700; padding:0; font-size:1em; }
.onboarding-fechar {
  position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%;
  border:none; background:transparent; color:var(--muted); cursor:pointer;
  font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.onboarding-fechar:hover { background:var(--panel); color:var(--acc3); }
.info-caixa { width:400px; position:relative; }
.info-caixa h3 { display:flex; align-items:center; gap:8px; }
.info-caixa h3 i { color:var(--acc); }
.info-lista { display:flex; flex-direction:column; gap:14px; margin:18px 0 6px; }
.info-item { display:flex; align-items:flex-start; gap:12px; }
.info-item i { color:var(--acc); font-size:.95rem; margin-top:2px; width:16px; text-align:center; flex-shrink:0; }
.info-item div { display:flex; flex-direction:column; gap:2px; }
.info-item strong { font-size:.85rem; color:var(--text); }
.info-item strong em { font-style:normal; color:var(--acc4); font-size:.72rem; font-weight:600; }
.info-item span { font-size:.78rem; color:var(--muted); line-height:1.5; }
.info-item code { font-size:.72rem; }

/* ===== TOAST ===== */
#toast {
  position:fixed; bottom:calc(var(--bot-h) + var(--stat-h) + 14px); left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--panel); border:1px solid var(--border); border-radius:var(--rsm);
  padding:8px 18px; font-size:.77rem; font-weight:600; color:var(--acc);
  opacity:0; transition:all .22s; pointer-events:none; z-index:99999999;
  white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 8px 30px rgba(0,0,0,.2);
}
#toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

#fi { display:none; }

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
::-webkit-scrollbar-track { background:transparent; }

/* ===== RESPONSIVO ===== */
@media(max-width:680px){
  #wrap { flex-direction:column; }

  /* Painéis do mobile — só um fica visível por vez (controlado via JS, função mobTab()).
     Importante: width não tem efeito aqui porque #wrap virou coluna acima — por isso o
     controle agora é por display, com a classe .mob-hide, não mais por largura. */
  #sidebarPro, #ep, #pp { width:100%!important; min-width:0; flex:1; border-right:none; }
  #sidebarPro.mob-hide, #ep.mob-hide, #pp.mob-hide { display:none!important; }

  #rz { display:none; }
  #bnav { display:flex; }
  #sb { bottom:var(--bot-h); }
  .app-body { height:calc(100vh - var(--top-h) - var(--stat-h) - var(--bot-h)); }
  .app-body.tem-faixa { margin-top:0; height:calc(100vh - var(--top-h) - var(--stat-h) - var(--bot-h) - var(--faixa-h, 38px)); }
  body.oculta-statusbar .app-body { height:calc(100vh - var(--top-h) - var(--bot-h)); }
  body.oculta-statusbar .app-body.tem-faixa { margin-top:0; height:calc(100vh - var(--top-h) - var(--bot-h) - var(--faixa-h, 38px)); }
  body.pwa-barra-ativa .app-body { margin-top:calc(var(--top-h) + var(--pwa-barra-h)); height:calc(100vh - var(--top-h) - var(--stat-h) - var(--bot-h) - var(--pwa-barra-h)); }
  #df.tablet, #df.phone { width:100%!important; height:100%!important; border-radius:var(--r)!important; border:none!important; box-shadow:none!important; }
  .pvhead #ubar { display:none; }
  .pvhead { flex-wrap:wrap; }
  .pvhead .btn { display:none; }
  .pvhead #btn-pvfs, .pvhead #btn-newtab-pv { display:flex; }
  #line-nums { width:32px; min-width:32px; }
  .ln-item { padding:0 6px 0 4px; font-size:.7rem; }
  .editor-tabs { display:none; } /* redundante — Dados agora é aba própria da barra inferior */
  .data-toolbar-acts .pact { width:36px; height:36px; }

  /* ---- Título de cada painel, visível só no mobile ---- */
  .painel-titulo-mobile { display:flex; order:-1; width:100%; padding-bottom:8px; }

  /* ---- Topbar: sem espaço pra tudo, mostra só o essencial ---- */
  #topbar { padding:0 10px; }
  #auto-badge, .nivel-badge, #nomeUsuario { display:none!important; }
  #tb-left { flex:1 1 auto; gap:8px; min-width:0; }
  #tb-center { position:static; left:auto; transform:none; flex:0 0 auto; margin-left:8px; }
  #tb-right { flex:0 0 auto; gap:0; }
  #btnSair, #btn-newtab-pv-tb, #btn-pvfs-tb, .tb-div-pv { display:none!important; }
  .btn.run { padding:9px 14px; } /* Executar/Ver Site agora mostra o texto por extenso no mobile também */
  #btn-toglayout { display:none; }

  /* ---- Barra do editor: 2 zonas — ponto verde + nome do arquivo à
     esquerda (sem o texto "Editor"), ícones à direita ---- */
  .phead { display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px; }
  .phead-left { justify-self:start; display:flex; align-items:center; gap:8px; min-width:0; }
  #plbl-editor span { display:none; } /* esconde só o texto "Editor", mantém o ::before (ponto verde) */
  #file-badge { max-width:52vw; }
  .editor-actions { justify-self:end; margin-left:0; }
  .phead-acts { display:none; } /* só tinha o btn-toglayout, já escondido — remove da grade */
  #badge { display:none; } /* esconde o badge de linguagem (HTML) */
  .editor-actions { gap:6px; }
  .editor-actions .pact { width:38px; height:38px; }
  .editor-actions .pact svg { width:18px; height:18px; }
  #btn-paste-editor { color:var(--acc2); }
  #btn-copy-editor { color:var(--acc); }
  #btn-clear-editor { color:var(--acc3); }

  /* ---- Árvore de arquivos: toque não tem :hover, então os botões de ação
     (renomear/excluir) precisam ficar sempre visíveis, e maiores pra facilitar o toque ---- */
  .arvore-item { padding:10px 8px; }
  .arvore-item .btn-renomear-item,
  .arvore-item .btn-excluir-item { opacity:1; padding:7px 9px; font-size:.95em; }
  .sidebar-topo button { padding:9px 12px; }

  /* ---- Aba Dados: alvo de toque maior, sanfona e dropdown com respiro nas laterais ---- */
  .tabela-acao { width:34px; height:34px; font-size:.9em; }
  .db-acordeao { margin:8px 10px 0; }
  .tabelas-bloco { margin:12px 10px 0; }

  /* ---- Modal SQL: título e ações colar/copiar/eliminar lado a lado ---- */
  .sql-modal-topo .editor-actions { margin-left:auto; }

  /* ---- Modais: ocupam quase a largura toda da tela, sem sobra nas laterais ---- */
  .modal-caixa { width:92vw; padding:18px; }
}