* { box-sizing: border-box; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin: 0; background: #0a0a0a; color: #e6e6e6; }
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #1f1f1f; position: sticky; top: 0; background: #0a0a0a; z-index: 10; }
.brand { font-weight: 700; letter-spacing: 0.3px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.tab { appearance: none; background: #121212; border: 1px solid #2a2a2a; color: #cfcfcf; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.tab.active { background: #2a2a2a; border-color: #3a3a3a; color: #eaeaea; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.status { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.progress { width: 200px; height: 8px; background: #141414; border: 1px solid #232323; border-radius: 999px; overflow: hidden; position: relative; }
.progress .bar { height: 100%; background: linear-gradient(90deg, #01d84d, #00a5ff); transition: width .2s ease; }
.progress.indeterminate .bar { position: absolute; width: 35%; left: -35%; animation: indet 1.2s linear infinite; }
@keyframes indet { 0% { left: -35%; } 100% { left: 100%; } }
.panel { display: none; background: #111; border: 1px solid #222; border-radius: 12px; padding: 16px; }
.panel.active { display: block; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; }
  .tabs { gap: 6px; }
.app-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.field { display: grid; gap: 6px; margin: 8px 0; }
.field > span { color: #a8a8a8; font-size: 12px; }
details.advanced { margin-top: 8px; }
details.advanced summary { cursor: pointer; color: #bcbcbc; }
input, select, textarea, button { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #2a2a2a; background: #0e0e0e; color: #fff; }
textarea { resize: vertical; min-height: 160px; }
.actions { display: flex; gap: 10px; margin-top: 10px; }
button { background: #2a2a2a; border-color: #2a2a2a; cursor: pointer; }
button.secondary { background: #2a2a2a; border-color: #2a2a2a; }
button:hover { filter: brightness(1.05); }
.dropzone { position: relative; border: 2px dashed #2a2a2a; border-radius: 12px; padding: 28px; text-align: center; color: #a8a8a8; }
.dropzone.dragover { background: #0f141f; border-color: #1f6feb; color: #e6f0ff; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.outputs a { display: inline-block; margin: 6px 8px 0 0; padding: 8px 10px; border: 1px solid #2a2a2a; border-radius: 8px; color: #e6e6e6; text-decoration: none; }
.outputs a:hover { background: #151515; }
.file-list { display: grid; gap: 8px; margin-top: 10px; }
.file-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; background: #0f0f0f; border: 1px solid #242424; border-radius: 10px; padding: 10px; }
.file-meta { display: flex; gap: 10px; flex-wrap: wrap; color: #cfcfcf; }
.badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid #2a2a2a; background: #151515; color: #dcdcdc; }
.file-actions { display: flex; gap: 8px; }
.progress-mini { width: 120px; height: 6px; border-radius: 999px; background: #141414; border: 1px solid #232323; overflow: hidden; }
.progress-mini .bar { height: 100%; background: linear-gradient(90deg, #01d84d, #00a5ff); width: 0%; transition: width .15s linear; }
.progress-mini.indeterminate .bar { position: relative; width: 35%; left: -35%; animation: indet 1.2s linear infinite; }
.file-outputs { display: grid; gap: 6px; margin-top: 8px; }
.file-outputs a { display: inline-block; }
.toasts { position: fixed; right: 12px; bottom: 12px; display: grid; gap: 8px; z-index: 50; }
.toast { background: #111; border: 1px solid #333; color: #e6e6e6; padding: 10px 12px; border-radius: 10px; min-width: 240px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.toast.success { border-color: #204f2c; }
.toast.error { border-color: #5d1f1f; }
.history { display: grid; gap: 10px; }
.hint { color: #9a9a9a; font-size: 12px; margin-top: 6px; }
.logs { max-height: 220px; overflow: auto; background: #0e0e0e; padding: 12px; border-radius: 8px; border: 1px solid #2a2a2a; }

/* Tema estilo Terminal do macOS */
.terminal-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #111; border: 1px solid #202020; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.terminal-dots { display: flex; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #ff5f56; border: 1px solid #e0443e; }
.dot.yellow { background: #ffbd2e; border: 1px solid #dea123; }
.dot.green { background: #27c93f; border: 1px solid #1da830; }
.terminal-body { border: 1px solid #202020; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; padding: 0; overflow: hidden; }
.panel { padding-top: 0; }

/* Logs sempre visíveis */
.logs-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 100;
  transition: height 0.3s ease, box-shadow 0.3s ease;
  height: 300px;
  overflow: hidden;
}

.logs-panel.collapsed {
  height: 40px;
  overflow: hidden;
}

.logs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #222;
  border-bottom: 1px solid #333;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  color: #ccc;
}

.btn-toggle-logs {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  width: auto;
}

.btn-toggle-logs:hover {
  background: #333;
}

.logs-live {
  height: calc(100% - 40px);
  overflow-y: auto;
  padding: 8px 12px;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  background: #0a0a0a;
  color: #e6e6e6;
  border-radius: 0 0 8px 8px;
  display: block;
}

.logs-panel.collapsed .logs-live {
  display: none;
}