* { box-sizing: border-box; }
body {
  margin: 0;
  overscroll-behavior-x: none;
}
.tip { position: relative; }
.tip .tip-tip {
  position: absolute;
  display: none;
}
.tip:hover .tip-tip { display: block; }
.fit { display: inline-block; }
.grid { display: grid; }
.flex { display: flex; }
.pool { display: grid; }
.insert { outline: 0; }
.dropdown {
  cursor: pointer;
  outline: 0;
}
.handle {
  cursor: pointer;
  outline: 0;
}
.full-height { height: 100%; }
.absolute { position: absolute; }
.grafou-gallery-footer {
  display: none;
}
#grafou-gallery {
  position: absolute;
}
.grafou-img-button {
  padding: 0;
  border: 0;
  background: transparent;
  display: block;
}
.grafou-label-container {
  display: grid;
  grid-template-columns: auto min-content;
  width: calc(100% - 12px);
  margin: 0 0 0 5px;
}
.grafou-img-label {
  border: 0;
  text-align: center;
  display: block;
  padding: 4px 0;
}
.grafou-img-label:hover {
  background: #ffffff87;
}
.grafou-gallery-container {
  background: #00000045;
  border: 1px solid gray;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  display: grid;
  grid-template-rows: auto min-content;
  font-family: sans-serif;
}
.grafou-gallery-inner {
  max-height: 80svh;
  overflow: auto;
}
.grafou-gallery-images-api, .grafou-gallery-images-www {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  padding: 20px;
}
.grafou-img {
  max-width: 200px;
  padding: 5px;
  cursor: pointer;
  display: block;
}
.grafou-gallery-image-edit:hover, .grafou-gallery-container .selected-grafou-img {
  border: 1px solid red;
}
.grafou-gallery-header {
  position: sticky;
  top: 0;
  background: lightgray;
  box-shadow: -1px 0px 3px black;
  padding: 4px 0;
}
.grafou-gallery-footer {
  background: black;
  padding: 4px 0;
  border-top: 1px solid gray;
  text-align: end;
}
.select-grafou-images {
  font-size: 20px;
  margin-right: 20px;
  background: transparent;
  color: green;
  border: 0;
  padding: 0;
  padding-top: 3px;
}
.select-grafou-images:hover {
  color: #116611;
}
#alert {
  color: black;
  font-size: 16px;
  bottom: 20px;
  position: absolute;
  left: 20px;
  padding: 10px;
  z-index: 10001 !important;
  display: none;
  background: white;
  border: 1px solid gray;
  height: min-content !important;
}
#alert.alert-error {
  color: white;
  background: #b10c0c;
  border: 1px solid darkred;
}
#alert.alert-success {
  color: white;
  background: green;
  border: 1px solid darkgreen;
}
#alert.alert-active { display: block; }
.hide-handle .togglerarrow-icons { padding: 0; }
.preview-wrapper-handles {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  white-space: nowrap;
}
.selected-element-title {
  background: lightgray;
  display: flex;
  white-space: break-spaces;
  font-size: 10px;
  margin-right: 5px;
  height: 27px;
  overflow-y: auto;
  overflow-x: hidden;
}
.preview-selected-element {
  display: grid;
  grid-template-columns: 1fr min-content;
}
.grafou-redo-view .bi {
  transform: rotate(180deg);
  display: block;
}
.data-handle {
  display: none !important;
}
.full-width { width: 100% !important; }
.ai-handle button { color: orange; }
.dashboard-wrappers {
  height: 100%;
  display: grid;
  grid-template-rows: auto min-content min-content;
}
.dashboard-wrappers .dashboard-handle {
  background: transparent;
  color: white;
  border: 1px solid gray;
  margin: 0;
}
.dashboard-wrappers .dashboard-handle:hover,
.dashboard-wrappers .active-dashboard-handle { background: #5d5d5d; }
.dashboard-wrappers .dashboard-wrapper { width: 100%; }
.preview-frame {
  background: white;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}
.dashboard-wrapper {
  display: grid;
  height: 100%;
}
.dashboard-container {
  overflow: auto;
}
.preview-container {
  max-width: 100vw;
  display: grid;
  grid-template-rows: 1fr min-content min-content;
}
.preview-container-inner {
  overflow: auto;
  padding: 15px 5px;
}
.preview-wrapper {
  margin: 0 auto;
  height: 100%;
  background: white;
  color: black;
  overflow: hidden;
}
.rules-grid-normal {
  grid-template-rows: 1fr !important;
}
.rules-grid-devtools .preview-container {
  grid-area: a;
}
.rules-grid-devtools .rules-grid-item {
  grid-area: b;
}
.rules-grid-devtools .code-container {
  grid-area: c;
}
.rules-grid-devtools .dashboard-container {
  grid-area: d;
}
.rules-grid-devtools {
  grid-template-areas: "d a" "d b" "d c";
  grid-template-columns: 25% 1fr !important;
}
.dashboard-container-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.preview-wrapper-yr {
  display: grid;
  justify-content: center;
  padding: 20px;
}
.preview-handles-collapsed {
  padding: 0 !important;
  display: block;
  width: 100%;
}
.dashboard-handles-collapsed {
  padding: 0 !important;
  display: flex;
}
.yrkitv2-preview, .yrkitv2-preview-collapsed {
    height: 100%;
}
.dashboard-container {
    min-height: 0;
}
.rules-grid {
    min-height: 0;
}
.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 81;
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.modal-content {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
}
.rules-grid {
  height: 100%;
  display: grid;
}
.rules-overlay {
  position: fixed;
  width: 100vw;
  height: 100svh;
  z-index: 999999;
}
.rules-grid-item {
  border: 2px solid gray;
  cursor: row-resize;
  position: relative;
  z-index: 1;
  top: 0 !important;
  left: 0 !important;
}
.rules-grid-item:hover {
  border: 6px solid gray;
}
/* ===== BASE ===== */
.words-code-container {
  display: grid;
  grid-template-rows: 1fr min-content;
  height: 100%;
  overflow: hidden;
}
.words-code {
  display: grid;
  grid-template-columns: min-content auto;
  background-color: #1f1f1f;
  height: 100%;
}
.line-numbers {
  text-align: end;
  overflow: hidden;
  padding: 10px;
  padding-top: 0;
  color: #617668;
  user-select: none;
  height: 150%;
}
.line-numbers, .words-code-insert, .highlight {
  font-size: 12px;
  line-height: 1.4;
  font-family: monospace;
}
.words-code-insert {
  white-space: pre;
  resize: none;
  height: 100%;
  margin: 0;
  outline: 0;
  border: 0;
  width: 100%;
  background-color: inherit;
  color: transparent;
  caret-color: gray;
  padding: 10px 0 10px 2px;
  border-left: 1px solid #3e3e3e;
}
.highlight-container {
  position: relative;
  overflow: hidden;
}
.highlight {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  white-space: pre;
  padding-left: 2px;
  border-left: 1px solid #3e3e3e;
  color: #9CDCFE;
  background-image: linear-gradient(to right, transparent calc(79ch + 3px), #ffb10038 calc(79ch + 3px), #ffb10038 calc(80ch + 2px), transparent calc(80ch + 2px));
  min-width: 85ch;
}
/* yr tokens */
.yr-comment { color: gray !important; }
.yr-trigger, .yr-section, .yr-macro { color: #e90; }
.yr-html-selector { color: #569CD6; }
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  background: transparent !important;
}
.words-code-insert {
  overflow: auto; /* 🔥 ESSENCIAL */
}
.words-code {
  height: 100%;
  max-height: 100%;
  overflow: hidden; /* 🔥 impede crescer infinito */
}
.highlight-container {
  position: relative;
  overflow: hidden; /* ok manter */
}
.words-code-handles {
  display: flex;
  gap: 10px;
  padding: 6px 10px;
  font-size: 11px;
  background: #181818;
  color: #aaa;
  border-top: 1px solid #333;
  align-items: center;
  white-space: nowrap;
}
.words-code-info {
  display: flex;
  gap: 10px;
}
.words-code-search {
  margin-left: auto;
}
.search-words-code {
  background: #222;
  border: 1px solid #333;
  color: #ccc;
  padding: 2px 6px;
  width: 11ch;
  font-family: inherit;
}
.toggle-macros, .search-prev, .search-next, .search-clear {
  background: #222;
  border: 1px solid #333;
  color: #ccc;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
}
.toggle-macros {
  color: #aaa !important;
}
.toggle-macros.active {
  color: green !important;
}
.search-prev:disabled, .search-next:disabled, .search-clear:disabled {
  opacity: 0;
  cursor: default;
  display: none;
}
.search-count {
  font-size: 11px;
  color: #888;
  min-width: 50px;
  text-align: center;
}
.font-inc, .font-dec, .search-clear {
  background: #222;
  border: 1px solid #333;
  color: #ccc;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
}
.font-inc:hover, .font-dec:hover, .search-clear:hover {
  background: #2a2a2a;
}
/* cursor char highlight */
.cursor-char {
  background: #ffffff22;
  outline: 1px solid #ffffff33;
}
.highlight {
  /* existing styles... */
  overflow: scroll;        /* was: nothing / hidden */
  scrollbar-width: none;   /* hide the scrollbar */
}
.highlight::-webkit-scrollbar {
  display: none;
}
.iframe-console {
  font-family: monospace;
  font-size: 12px;
  background: #1e1e1e;
  color: #ddd;
  padding: 8px;
  overflow-y: auto;
}
.entry {
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid gray;
}
.time { color: #777; }
.level-log { color: #ccc; }
.level-warn { color: #e5c07b; }
.string { color: #98c379; }
.number { color: #d19a66; }
.boolean { color: #56b6c2; }
.null, .undefined { color: #c678dd; }
.function {
  color: #61afef;
  cursor: pointer;
}
.dom-node { color: #e5c07b; }
.object-key { color: #abb2bf; }
.level-error, .level-error .object-key { color: #e06c75; }
.collapsible { cursor: pointer; }
.children { margin-left: 15px; }
.stack-line {
  font-family: monospace;
  padding-left: 1em;
  white-space: pre;
}
.stack-line.clickable {
  cursor: pointer;
  color: #4ea1ff;
  text-decoration: underline;
}
.stack-line.clickable:hover {
  color: #1e90ff;
}
.entry > span { margin-right: 7px; }
.entry > span:first-child { margin-right: 0; }
.code-snippet {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 0.5em;
  margin: 0.25em 0;
  border-radius: 4px;
  overflow-x: auto;
  text-decoration: none !important;
}
.elements-tab {
  font-family: monospace;
  font-size: 12px;
  white-space: pre;
  line-height: 1.6;
  background: #111;
  color: #eee;
  overflow: auto;
  height: 100%;
  padding: 10px 0;
}
.node {
  cursor: pointer;
}
.collapsed > .el-children {
  display: none;
}
.entry-label {
  color: #8cf;
}
.entry-label:hover {
  background: gray;
}
.highlight-locked {
  background: blue;
  color: gray;
}
/* ===== Variáveis globais ===== */
:root {
  --chat-bg: #ffffff;
  --chat-bg-container: #f8fafc;
  --chat-border: #e2e8f0;
  --chat-border-light: #edf2f7;
  --chat-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  --chat-radius: 16px;
  --msg-user-bg: #dbeafe;
  --msg-assistant-bg: #f1f5f9;
  --msg-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  --msg-radius: 20px;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-light: rgba(99, 102, 241, 0.15);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --success: #10b981;
  --danger: #ef4444;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
}
/* Tema escuro (detecção automática) */
@media (prefers-color-scheme: dark) {
  :root {
    --chat-bg: #1e293b;
    --chat-bg-container: #0f172a;
    --chat-border: #334155;
    --chat-border-light: #1e293b;
    --chat-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    --msg-user-bg: #1e3a5f;
    --msg-assistant-bg: #1e293b;
    --msg-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    --primary: #818cf8;
    --primary-hover: #6366f1;
    --primary-light: rgba(129, 140, 248, 0.15);
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
  }
}
/* Container principal */
.chat-container {
  font-family: var(--font-sans);
  background: linear-gradient(145deg, var(--chat-bg-container), var(--chat-bg));
  border-radius: var(--chat-radius);
  box-shadow: var(--chat-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--chat-border);
  transition: all 0.3s ease;
  color: var(--text-primary);
  position: relative;
}
/* Input container */
.input-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
/* Botões de ação */
.button-container {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0;
}
/* Histórico */
.chat-history {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 24px;
  background-color: var(--chat-bg);
  border-bottom: 1px solid var(--chat-border-light);
  height: 100%;
  transition: background-color 0.3s ease;
  scroll-behavior: smooth;
}
/* Crédito */
.chat-credit {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Mensagens */
.chat-user,
.chat-assistant {
  max-width: 80%;
  padding: 12px 18px;
  margin-bottom: 14px;
  border-radius: var(--msg-radius);
  line-height: 1.6;
  word-wrap: break-word;
  position: relative;
  box-shadow: var(--msg-shadow);
  font-size: 15px;
  animation: messageSlideIn 0.35s ease forwards;
  opacity: 0;
  transform: translateY(12px);
}
@keyframes messageSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.chat-user {
  background-color: var(--msg-user-bg);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  color: var(--text-primary);
}
.chat-assistant {
  background-color: var(--msg-assistant-bg);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  color: var(--text-primary);
}
/* Rótulo do papel da mensagem */
.message-role {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* Botão copiar */
.copy-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--chat-border-light);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.25s ease, background 0.2s;
  backdrop-filter: blur(4px);
}
.chat-msg:hover .copy-btn {
  opacity: 0.8;
}
.copy-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.95);
}
/* Indicador de digitação */
.typing-indicator {
  font-style: italic;
  color: var(--text-muted);
  margin: 10px 24px;
  font-size: 14px;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Pulsação (não usado diretamente, mas mantido para consistência) */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.03); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0.6; }
}
/* Bolinhas do "thinking" */
.dots::after {
  content: '...';
  animation: blink 1.2s steps(3, end) infinite;
}
@keyframes blink {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}
/* Formulário */
.chat-form {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 16px;
  background-color: var(--chat-bg);
  border-top: 1px solid var(--chat-border-light);
}
/* Campo de input */
.chat-user-input {
  flex: 1;
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 24px;
  border: 1px solid var(--chat-border);
  outline: none;
  background-color: var(--chat-bg-container);
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
  resize: none;
  height: 44px;
  line-height: 1.5;
  color: var(--text-primary);
}
.chat-user-input::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
}
.chat-user-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
  background-color: var(--chat-bg);
}
/* Botões de ação (enviar, áudio, parar) */
.chat-user-submit,
.chat-audio-input,
.chat-audio-stop {
  padding: 10px 16px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  min-width: 44px;
  height: 44px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
.chat-user-submit:hover,
.chat-audio-input:hover,
.chat-audio-stop:hover {
  background: linear-gradient(135deg, var(--primary-hover), var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.chat-user-submit:focus,
.chat-audio-input:focus,
.chat-audio-stop:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--primary-light);
}
.chat-user-submit:active,
.chat-audio-input:active,
.chat-audio-stop:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.2);
}
/* Toggle de tema (manter compatibilidade) */
#theme-toggle {
  position: absolute;
  top: 12px;
  right: 20px;
  padding: 6px 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 99;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.2);
  transition: background 0.2s, box-shadow 0.2s;
}
#theme-toggle:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
/* Blocos de código */
.chat-container pre,
.chat-container code {
  background: #1e293b;
  color: #e2e8f0;
  font-family: var(--font-mono);
  padding: 12px 16px;
  border-radius: 10px;
  overflow-x: auto;
  line-height: 1.6;
  font-size: 13px;
  margin: 8px 0;
  border: 1px solid #334155;
}
.chat-container pre {
  counter-reset: line;
}
/* Aviso */
.chat-disclaimer {
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 12px 0;
  padding: 8px 14px;
  background-color: var(--chat-bg-container);
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--chat-border);
}
/* Container de mensagem */
.chat-msg {
  display: flex;
  flex-direction: row;
  overflow: clip;
  position: relative;
}
.chat-msg p {
  margin: 0;
}
/* Ações de confirmação */
.confirm-actions {
  display: flex;
  gap: 8px;
  align-self: flex-start;
  margin-top: 6px;
}
.confirm-save,
.confirm-cancel {
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: white;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}
.confirm-save {
  background-color: var(--success);
}
.confirm-cancel {
  background-color: var(--danger);
}
.confirm-save:hover {
  background-color: #059669;
  transform: scale(1.03);
}
.confirm-cancel:hover {
  background-color: #dc2626;
  transform: scale(1.03);
}
/* Controles superiores */
.chat-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 24px;
  background-color: var(--chat-bg);
  border-bottom: 1px solid var(--chat-border-light);
}
.chat-clear-button,
.chat-settings-button {
  padding: 6px 12px;
  border: 1px solid var(--chat-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
}
.chat-clear-button:hover,
.chat-settings-button:hover {
  background-color: var(--chat-bg-container);
  color: var(--text-primary);
  border-color: var(--text-muted);
}
.chat-clear-button:disabled,
.chat-settings-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* Placeholder central */
.chat-placeholder {
  font-size: 20px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  user-select: none;
  font-weight: 300;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  padding: 0;
  animation: fadeIn 0.4s ease;
  letter-spacing: 0.3px;
  pointer-events: none;
}
/* ===== Avatar das mensagens ===== */
.chat-msg {
  gap: 10px;
}
.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin-top: 4px;
}
.chat-user .msg-avatar {
  order: 1;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.chat-assistant .msg-avatar {
  background: linear-gradient(135deg, #10b981, #059669);
}
.msg-bubble {
  flex: 1;
}
/* ===== Timestamp ===== */
.message-timestamp {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0.7;
  padding-right: 8px;
  text-align: right;
}
/* ===== Efeito ripple no botão ===== */
.chat-user-submit {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
/* ===== Auto-resize textarea ===== */
.chat-user-input {
  overflow-y: hidden;
  min-height: 44px;
  max-height: 160px;
}
/* ===== Botão anexar ===== */
.chat-attach-input {
  padding: 10px 16px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  min-width: 44px;
  height: 44px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
.chat-attach-input:hover {
  background: linear-gradient(135deg, var(--primary-hover), var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.chat-attach-input:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--primary-light);
}
.chat-attach-input:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.2);
}
/* ===== Preview de imagem ===== */
.image-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--chat-bg-container);
  border-radius: 12px;
  border: 1px solid var(--chat-border);
  margin: 0 16px 8px;
}
.image-preview.hidden {
  display: none;
}
.preview-img {
  max-height: 60px;
  max-width: 120px;
  border-radius: 8px;
  object-fit: cover;
}
.remove-attachment {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.remove-attachment:hover {
  background: var(--chat-border-light);
  color: var(--danger);
}
.grafou-wrappers-basic-toggler button {
  text-align: start;
  width: 100%;
  font-size: 12px;
  font-family: sans-serif;
  color: #051e3c;
  background: transparent;
  border: 0;
  padding-top: 3px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.grafou-wrappers-basic-toggler button:hover {
  background: #4e78ad;
  color: white;
}
.grafou-wrappers-basic-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2px;
  padding: 2px;
  padding-top: 0;
  margin-top: 2px;
}
.grafou-new-wrapper {
  display: block;
  width: 100%;
  text-align: start;
  border: 0;
  border-bottom: 1px solid gray;
  background: white;
}
.grafou-new-wrapper:hover {
  background: var(--grafou-bg5);
}
.grafou-wrappers-basic-container button {
  background: #7b98ff;
  border: 1px solid #266983;
  text-align: start;
  color: #e9f5ff;
  padding-top: 5px;
  padding-bottom: 4px;
  display: grid;
  grid-template-columns: min-content auto;
  grid-gap: 6px;
  align-content: center;
}
.grafou-wrappers-basic button {
  user-select: none;
}
.grafou-wrappers-basic-container button:hover {
  background: #435e70;
}
.grafou-new-wrapper span {
  padding-right: 5px;
}
.grafou-wrappers { position: relative; }
.grafou-wrapper-item { padding-left: 22px; }
.grafou-wrapper-rule {
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  width: 1px;
  background: gray;
  margin-left: -10px;
}
.grafou-wrappers-basic {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px;
}
.grafou-wrappers-basic-container {
  height: min-content;
}
.grafou-wrappers-basic-inner {
  border-left: 1px solid gray;
  padding-left: 3px;
}
  @media only screen and (max-width: 1282px) {
      .grafou-wrappers-basic {
    grid-template-columns: 1fr 1fr;
  }
  }
  @media only screen and (max-width: 802px) {
      .grafou-wrappers-basic {
    display: block;
  }
  .grafou-wrappers-basic-inner {
    border-left: 0;
    padding-left: 0;
  }
  }
.togglerarrow-icons { padding-right: 5px; }
.tree-dir button {
  display: block;
  width: 100%;
  text-align: start;
  user-select: none;
}
.tree-file {
  padding-left: 20px;
  user-select: none;
}
.tree { position: relative; }
.search-container { margin-bottom: 10px; }
.tree-rule {
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  width: 1px;
  background: gray;
  margin-left: -6px;
}
.tree-dir button:hover, .tree-file:hover { background: #37373d; }
.open-tree { background: #2f2f2f !important; }
.active-tree {
  background: #0d871c !important;
  cursor: default;
}
.cut-tree { color: #686363 !important; }
.active-contextmenu { background: #e71c1c !important; }
.grafou-attributes-header {
  position: sticky;
  top: 0;
  background: white;
  border-bottom: 1px solid gray;
}
.gs-display-picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}
.grafou-styles {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.grafou-styles-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/*.gs-sel-pill {*/
.grafou-styles select {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--blue);
  background: rgba(79,143,255,.07);
  border: 1px solid rgba(79,143,255,.18);
  border-radius: 4px;
  padding: 1px 8px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 130px;
}
.grafou-classes-input {
  background: transparent;
  border: 0;
  width: 130px;
  color: var(--blue);
  font-family: var(--mono);
}
.gs-save-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--s3);
  color: var(--muted);
  cursor: not-allowed;
  font-size: 10px;
  font-family: var(--mono);
  transition: all .13s;
  flex-shrink: 0;
}
.gs-save-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  cursor: pointer;
}
.gs-save-btn.active:hover { opacity: .85; }
.gs-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0;
}
.gs-scroll {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  gap: 5px;
}
  @media only screen and (max-width: 1282px) {
      .gs-scroll {
    grid-template-columns: repeat(2, 50%);
  }
  }
  @media only screen and (max-width: 802px) {
      .gs-scroll {
    grid-template-columns: 100%;
  }
  }
.gs-section {
  flex: 1 1 340px;
  border: 1px solid var(--border);
  align-self: flex-start;
}
.gs-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.gs-section-header:hover { background: var(--surface); }
.gs-section-header.open  { background: var(--surface); }
.gs-sh-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.gs-sh-label { font-size: 12px; font-weight: 600; flex: 1; color: var(--text2); }
.gs-section-header.open .gs-sh-label { color: var(--text); }
.gs-sh-arrow { font-size: 10px; color: var(--muted); transition: transform .15s; flex-shrink: 0; }
.gs-section-header.open .gs-sh-arrow { transform: rotate(90deg); }
.gs-section-body {
  display: none;
  padding: 8px 12px 14px;
  background: var(--surface);
}
.gs-section-body.open { display: block; }
.gs-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: flex-end; }
.gs-row:last-child { margin-bottom: 0; }
.gs-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; min-height: 0; }
.gs-label {
  font-size: 9px; font-family: var(--mono); color: var(--muted);
  letter-spacing: .4px; text-transform: uppercase;
}
.gs-inp {
  background: var(--s3); border: 1px solid var(--border2);
  border-radius: 7px; padding: 0 9px; height: 32px;
  color: var(--text); font-family: var(--mono); font-size: 12px;
  outline: none; width: 100%; transition: border-color .12s;
}
.gs-inp:focus { border-color: var(--blue); }
.gs-inp::placeholder { color: var(--muted); }
.gs-size-wrap { display: flex; gap: 3px; }
.gs-size-num  { flex: 1; }
.gs-size-unit { width: 54px; flex-shrink: 0; }
.gs-expr-wrap { position: relative; flex: 1; }
.gs-expr-wrap .gs-inp { padding-right: 30px; }
.gs-expr-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 4px; border: none;
  background: var(--s4); color: var(--muted); font-size: 10px;
  font-family: var(--mono); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.gs-expr-btn.on { background: rgba(79,143,255,.15); color: var(--blue); }
.gs-tg { display: flex; gap: 3px; }
.gs-tg-btn {
  flex: 1; height: 32px; border-radius: 7px;
  border: 1px solid var(--border2); background: var(--s3); color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s; padding: 0; font-size: 13px;
}
.gs-tg-btn:hover { border-color: var(--border); color: var(--text2); }
.gs-tg-btn.on    { background: var(--s4); border-color: var(--blue); color: var(--text); }
.gs-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.gs-chip {
  padding: 3px 9px; border-radius: 20px; font-size: 10px;
  font-family: var(--mono); background: var(--s3);
  border: 1px solid var(--border2); color: var(--muted);
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.gs-chip:hover { border-color: var(--blue); color: var(--text2); }
.gs-chip.on    { background: var(--s4); border-color: var(--blue); color: var(--text); }
.gs-color {
  position: relative;
  height: 32px;
  min-height: 32px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border2);
  cursor: pointer;
  flex: 1;
  flex-shrink: 0;
  transition: border-color .12s;
  display: block;
}
.gs-color:hover    { border-color: var(--blue); }
.gs-color-bg       { position: absolute; inset: 0; }
.gs-color-input    { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.gs-color-hex {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.75);
  pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); letter-spacing: .3px;
}
.gs-bm-label {
  font-size: 9px; font-family: var(--mono); color: var(--muted);
  letter-spacing: .4px; text-transform: uppercase; margin-bottom: 5px;
}
.gs-bm-wrap {
  background: var(--s3); border: 1px solid var(--border2);
  border-radius: 9px; padding: 5px; margin-bottom: 10px;
}
.gs-bm-grid {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  grid-template-rows: 28px auto 28px;
  gap: 3px;
}
.gs-bm-center {
  background: var(--s4); border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-family: var(--mono); color: var(--muted); min-height: 30px;
}
.gs-bm-edge { display: flex; align-items: center; justify-content: center; }
.gs-bm-inp {
  width: 30px; background: none; border: none;
  border-bottom: 1px solid var(--border2); color: var(--text);
  font-family: var(--mono); font-size: 11px; text-align: center;
  outline: none; padding: 2px 0; transition: border-color .12s;
}
.gs-bm-inp:focus       { border-color: var(--blue); }
.gs-bm-inp::placeholder { color: var(--muted); font-size: 10px; }
.gs-display-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px;
}
.gs-display-opt {
  background: var(--s3); border: 1px solid var(--border2); border-radius: 8px;
  padding: 7px 4px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; cursor: pointer; transition: all .12s;
  color: var(--text);
}
.gs-display-opt:hover { border-color: var(--border); }
.gs-display-opt.on    { background: var(--s4); border-color: var(--blue); }
.gs-d-ico { font-size: 14px; }
.gs-d-lbl { font-size: 9px; font-family: var(--mono); color: var(--muted); }
.gs-display-opt.on .gs-d-lbl { color: var(--text2); }
.gs-ctx { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; }
.gs-ctx-label {
  font-size: 9px; font-family: var(--mono); color: var(--muted);
  letter-spacing: .8px; text-transform: uppercase; margin-bottom: 7px;
}
.gs-more-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; border-top: 1px dashed var(--border);
  width: 100%; padding: 6px 0 0; margin-top: 8px;
  font-size: 10px; font-family: var(--mono); color: var(--muted);
  cursor: pointer; transition: color .12s;
}
.gs-more-btn:hover { color: var(--text2); }
.gs-more-body { display: none; padding-top: 8px; }
.gs-more-body.open { display: block; }
.gs-radius-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.gs-radius-prev {
  background: var(--s4); border: 1px solid var(--border);
  height: 40px; border-radius: 0; margin-bottom: 6px; transition: border-radius .2s;
}
.gs-shadow-prev {
  background: var(--s4); border-radius: 7px;
  height: 34px; margin-bottom: 6px; transition: box-shadow .2s;
}
.gs-hint { font-size: 10px; color: var(--muted); font-family: var(--mono); margin-top: 4px; }
.gs-code-editor {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
  color: var(--text);
}
.grafou-classes { position: relative; }
.grafou-classes-select {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  user-select: none;
}
.togglerexpand-icons { padding-right: 5px; }
*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0
}
:root {
  --bg:#060609;
  --s1:rgba(255, 255, 255, 0.035);
  --s2:rgba(255, 255, 255, 0.06);
  --b:rgba(255, 255, 255, 0.08);
  --b2:rgba(255, 255, 255, 0.14);
  --b3:rgba(255, 255, 255, 0.22);
  --acc:#A8FF00;
  --acc-d:rgba(168, 255, 0, 0.12);
  --txt:#fff;
  --txt2:rgba(255, 255, 255, 0.48);
  --txt3:rgba(255, 255, 255, 0.2);
  --mono:'JetBrains Mono', monospace;
  --sans:'Inter', sans-serif;
  --r:14px;
}
html {
  scroll-behavior:smooth
}
body {
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
img, video {
  display:block;
  width:100%
}
nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  border-bottom:1px solid var(--b);
  background:rgba(6, 6, 9, 0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.logo {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:14px;
  font-weight:500
}
.logo img {
  width:20px;
  height:20px;
  border-radius:5px
}
.nav-c {
  display:flex;
  align-items:center
}
.na {
  font-size:13px;
  color:var(--txt2);
  padding:6px 14px;
  border-radius:6px;
  transition:color .12s
}
.na:hover {
  color:var(--txt)
}
.nav-r {
  display:flex;
  align-items:center;
  gap:8px
}
.n-ghost {
  font-size:13px;
  color:var(--txt2);
  padding:6px 12px;
  transition:color .12s
}
.n-ghost:hover {
  color:var(--txt)
}
.n-cta {
  font-size:13px;
  font-weight:500;
  background:var(--txt);
  color:#060609;
  padding:7px 16px;
  border-radius:7px;
  transition:opacity .12s
}
.n-cta:hover {
  opacity:.85
}
/* HERO */
.hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:54px 24px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.h-bg {
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(ellipse 65% 50% at 50% -5%, rgba(168, 255, 0, 0.08) 0%, transparent 55%), radial-gradient(ellipse 40% 30% at 15% 70%, rgba(80, 100, 255, 0.04) 0%, transparent 50%), radial-gradient(ellipse 40% 30% at 85% 70%, rgba(255, 80, 120, 0.03) 0%, transparent 50%);
}
.h-grid {
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(var(--b) 1px, transparent 1px), linear-gradient(90deg, var(--b) 1px, transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 68%);
  opacity:.45;
}
.h-inner {
  position:relative;
  z-index:1;
  width:100%;
  max-width:900px;
  padding-top:40px
}
h1 {
  font-size:clamp(32px, 4.2vw, 56px);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.04em;
  margin-bottom:14px;
}
h1 em {
  font-style:normal;
  background:linear-gradient(160deg, var(--acc) 20%, rgba(168, 255, 0, .55) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}
h1 .d {
  color:rgba(255, 255, 255, .32)
}
.h-sub {
  font-size:15px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.6;
  max-width:480px;
  margin:0 auto 22px
}
.h-btns {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:36px;
  flex-wrap:wrap
}
.btn-p {
  font-size:14px;
  font-weight:500;
  background:var(--acc);
  color:#060609;
  padding:11px 24px;
  border-radius:8px;
  transition:opacity .12s, transform .1s;
  letter-spacing:-.01em
}
.btn-p:hover {
  opacity:.87;
  transform:translateY(-1px)
}
.btn-o {
  font-size:14px;
  color:var(--txt2);
  padding:11px 20px;
  border-radius:8px;
  border:1px solid var(--b2);
  transition:color .12s, border-color .12s
}
.btn-o:hover {
  color:var(--txt);
  border-color:var(--b3)
}
/* HERO SCREENSHOT */
.h-shot {
  width:100%;
  max-width:1080px;
  margin:0 auto;
  position:relative
}
.h-shot-glow-line {
  position:absolute;
  top:0;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(168, 255, 0, .45), transparent)
}
.h-shot-glow {
  position:absolute;
  top:-24px;
  left:15%;
  right:15%;
  height:48px;
  background:var(--acc);
  filter:blur(48px);
  opacity:.09
}
.frame {
  border-radius:var(--r);
  border:1px solid var(--b2);
  overflow:hidden
}
.dot {
  width:10px;
  height:10px;
  border-radius:50%
}
.dot.r {
  background:#FF5F57
}
.dot.y {
  background:#FEBC2E
}
.dot.g {
  background:#28C840
}
/* placeholder util */
.ph {
  background:var(--s1);
  border:1px dashed rgba(255, 255, 255, .12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--txt3);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase
}
/* DIVIDER */
hr {
  border:none;
  border-top:1px solid var(--b)
}
/* SECTIONS */
.wrap {
  max-width:1080px;
  margin:0 auto;
  padding:0 24px
}
.sec {
  padding:112px 24px;
  max-width:1080px;
  margin:0 auto
}
.sec-tag {
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  color:var(--txt3);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:18px
}
h2 {
  font-size:clamp(32px, 4.5vw, 58px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.02;
  margin-bottom:14px
}
h2 em {
  font-style:normal;
  color:var(--acc)
}
.sec-sub {
  font-size:17px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.7;
  max-width:500px;
  margin-bottom:60px
}
/* FEATURE ROWS — alternating screenshot + text */
.feat-rows {
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--b)
}
.feat-row {
  background:var(--bg);
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:420px;
}
.feat-row.rev {
  direction:rtl
}
.feat-row.rev > * {
  direction:ltr
}
.feat-visual {
  position:relative;
  overflow:hidden;
  background:var(--s1);
  border-right:1px solid var(--b);
}
.feat-row.rev .feat-visual {
  border-right:none;
  border-left:1px solid var(--b)
}
.feat-visual img, .feat-visual video {
  width:100%;
  height:100%;
  object-fit:cover
}
.feat-text {
  padding:52px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.feat-num {
  font-family:var(--mono);
  font-size:10px;
  color:var(--txt3);
  letter-spacing:.1em;
  margin-bottom:20px
}
.feat-title {
  font-size:clamp(22px, 2.8vw, 32px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:14px
}
.feat-desc {
  font-size:15px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.7
}
.feat-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:24px
}
.feat-tag {
  font-family:var(--mono);
  font-size:10px;
  padding:3px 9px;
  border-radius:4px;
  border:1px solid var(--b2);
  color:var(--txt2);
  letter-spacing:.04em
}
/* YR LANG SECTION */
.yr-sec {
  padding:112px 24px;
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.yr-code {
  background:var(--s1);
  border:1px solid var(--b);
  border-radius:var(--r);
  overflow:hidden;
}
.yr-code-bar {
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-bottom:1px solid var(--b);
  background:rgba(0, 0, 0, .3)
}
.yr-code-body {
  padding:20px 24px;
  font-family:var(--mono);
  font-size:13px;
  line-height:1.9
}
.cl {
  display:flex;
  gap:16px
}
.ln {
  color:var(--txt3);
  min-width:18px;
  text-align:right;
  font-size:11px;
  user-select:none
}
.kw {
  color:#C792EA
}
.fn {
  color:#82AAFF
}
.st {
  color:#C3E88D
}
.tg {
  color:#F07178
}
.at {
  color:#FFCB6B
}
.cm {
  color:rgba(255, 255, 255, .22);
  font-style:italic
}
.hl {
  background:rgba(168, 255, 0, .05);
  margin:0 -24px;
  padding:0 24px;
  border-radius:3px
}
/* LOGOS / SOCIAL PROOF */
.proof {
  border-top:1px solid var(--b);
  border-bottom:1px solid var(--b);
  padding:40px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
  flex-wrap:wrap;
}
.proof-stat {
  text-align:center
}
.proof-n {
  font-size:36px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1
}
.proof-l {
  font-size:13px;
  color:var(--txt2);
  margin-top:4px;
  font-weight:300
}
.proof-sep {
  width:1px;
  height:40px;
  background:var(--b2)
}
/* TESTIMONIAL */
.testimonials {
  padding:112px 24px;
  max-width:1080px;
  margin:0 auto
}
.t-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:60px
}
.t-card {
  background:var(--s1);
  border:1px solid var(--b);
  border-radius:var(--r);
  padding:28px;
  transition:border-color .15s, background .15s;
}
.t-card:hover {
  border-color:var(--b2);
  background:var(--s2)
}
.t-text {
  font-size:14px;
  color:var(--txt2);
  line-height:1.7;
  font-weight:300;
  margin-bottom:20px
}
.t-author {
  display:flex;
  align-items:center;
  gap:10px
}
.t-avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--s2);
  border:1px solid var(--b2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  flex-shrink:0
}
.t-name {
  font-size:13px;
  font-weight:500
}
.t-role {
  font-size:12px;
  color:var(--txt3)
}
/* PLANS */
.plans-sec {
  padding:112px 24px;
  max-width:1080px;
  margin:0 auto
}
.plans {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--b);
  border:1px solid var(--b);
  border-radius:var(--r);
  overflow:hidden;
  margin-top:60px
}
.plan {
  background:var(--bg);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:background .15s
}
.plan:hover {
  background:var(--s1)
}
.plan.hi {
  background:var(--s1)
}
.plan-line {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--acc)
}
.pname {
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  color:var(--txt3);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:18px
}
.pprice {
  font-size:38px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1
}
.pprice sub {
  font-size:14px;
  font-weight:400;
  color:var(--txt2);
  letter-spacing:0
}
.pdesc {
  font-size:13px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.5;
  margin:12px 0 20px;
  flex:1
}
.phr {
  height:1px;
  background:var(--b);
  margin-bottom:18px
}
.pf {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:24px
}
.pf li {
  font-size:12px;
  color:var(--txt2);
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-weight:300;
  line-height:1.4
}
.pf li::before {
  content:'↗';
  color:var(--acc);
  font-size:10px;
  flex-shrink:0;
  margin-top:2px;
  font-family:var(--mono)
}
.pf li.no {
  color:var(--txt3)
}
.pf li.no::before {
  content:'—';
  color:var(--txt3)
}
.pbtn {
  display:block;
  text-align:center;
  padding:10px;
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  border:1px solid var(--b2);
  color:var(--txt2);
  transition:all .12s;
  margin-top:auto
}
.pbtn:hover {
  border-color:var(--b3);
  color:var(--txt)
}
.pbtn.a {
  background:var(--acc);
  color:#060609;
  border-color:transparent;
  font-weight:600
}
.pbtn.a:hover {
  opacity:.87
}
/* CTA */
.cta {
  padding:160px 24px;
  text-align:center;
  border-top:1px solid var(--b);
  position:relative;
  overflow:hidden
}
.cta::before {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:40%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(168, 255, 0, .4), transparent)
}
.cta-glow {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:600px;
  height:280px;
  background:radial-gradient(ellipse at top, rgba(168, 255, 0, .06) 0%, transparent 65%);
  pointer-events:none
}
.cta-inner {
  max-width:600px;
  margin:0 auto;
  position:relative
}
.cta h2 {
  margin-bottom:16px
}
.cta-p {
  font-size:17px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.65;
  margin-bottom:36px
}
footer {
  border-top:1px solid var(--b);
  padding:28px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.fl {
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--txt2)
}
.fl img {
  width:16px;
  height:16px;
  border-radius:4px;
  opacity:.5
}
.flinks {
  display:flex;
  gap:20px;
  list-style:none
}
.flinks a {
  font-size:12px;
  color:var(--txt3);
  transition:color .12s
}
.flinks a:hover {
  color:var(--txt2)
}
.fc {
  font-size:12px;
  color:var(--txt3)
}
@media(max-width:900px) {
  .blog-sec .b-grid {
    grid-template-columns:1fr;
  }
  nav {
    padding:0 16px
  }
  .nav-c {
    display:none
  }
  .feat-row {
    display:flex;
    flex-direction:column-reverse;
  }
  .feat-row.rev {
    direction:ltr;
  }
  .feat-visual {
    border-right:none !important;
    border-left:none !important;
    border-bottom:1px solid var(--b);
  }
  .feat-text {
    padding:28px 24px 36px;
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    border-bottom:1px solid var(--b);
  }
  .yr-sec {
    grid-template-columns:1fr;
    gap:40px
  }
  .t-grid {
    grid-template-columns:1fr
  }
  .b-grid {
    grid-template-columns:1fr
  }
  .plans {
    grid-template-columns:1fr 1fr
  }
  .proof {
    gap:28px
  }
  .proof-sep {
    display:none
  }
  footer {
    flex-direction:column;
    gap:16px;
    text-align:center;
    padding:24px 16px
  }
  .flinks {
    flex-wrap:wrap;
    justify-content:center
  }
}
@media(max-width:560px) {
  .plans {
    grid-template-columns:1fr
  }
  h1 {
    font-size:52px
  }
  h2 {
    font-size:34px
  }
  .t-grid {
    grid-template-columns:1fr
  }
}
/* BLOG */
.blog-sec {
  padding:112px 24px;
  max-width:1080px;
  margin:0 auto;
}
.b-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:12px;
  margin-top:60px;
}
.b-card {
  background:var(--s1);
  border:1px solid var(--b);
  border-radius:var(--r);
  padding:28px;
  display:flex;
  flex-direction:column;
  transition:border-color .15s, background .15s;
}
.b-card:hover {
  border-color:var(--b2);
  background:var(--s2);
}
.b-card-tag {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--acc);
  margin-bottom:16px;
}
.b-card-title {
  font-size:19px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.2;
  margin-bottom:10px;
}
.b-card-ex {
  font-size:14px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.6;
  margin-bottom:20px;
  flex:1;
}
.b-card-meta {
  display:flex;
  gap:12px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--txt3);
  border-top:1px solid var(--b);
  padding-top:16px;
}
.b-all {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:32px;
  font-size:14px;
  font-weight:500;
  color:var(--acc);
  transition:opacity .12s;
}
.b-all:hover {
  opacity:.8;
}
@media(max-width:900px) {
  .blog-sec .b-grid {
    grid-template-columns:1fr;
  }
}
.yrkit-preview {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.yrkit-preview .dashboard-wrappers {
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.yrkit-preview .dashboard-wrapper {
  flex: 1 1 auto;
  min-height: 0;
}
.yrkit-preview .preview-container,
.yrkit-preview .code-container {
  height: 100%;
}
/* Botões grafou-* escondidos, exceto grafou-download-view */
.yrkit-preview button[class*="grafou-"]:not([class~="grafou-download-view"]):not([class~="select-grafou-images"]) {
  display: none !important;
}
/* Esconde a barra de ações do dashboard */
.yrkit-preview .dashboard-handles {
  display: none !important;
}
/* ============ DOWNLOAD VIEW (botão flutuante) ============ */
.yrkit-preview .grafou-download-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 4px;
  z-index: 30;
  width: auto;
  height: auto;
  padding: 8px 14px;
  background: rgba(18, 21, 27, 0.85);
  border: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.yrkit-preview .grafou-download-view:hover {
  background: var(--panel);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.yrkit-preview .grafou-download-view .bi {
  font-size: 1rem;
  line-height: 1;
}
.preview-container-inner {
  background: gray;
}
.tip-tip {
  display: none !important;
}
/* ============ SCROLLBAR DO EDITOR ============ */
.words-code-insert::-webkit-scrollbar {
  width: 10px;
}
.words-code-insert::-webkit-scrollbar-track {
  background: transparent;
}
.words-code-insert::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
  border: 2px solid var(--panel);
}
.words-code-insert::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dim);
}
/* SOCIAL LINKS */
.socials {
  display: flex;
  align-items: center;
  gap: 2px;
}
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--txt3);
  font-size: 13px;
  opacity: .55;
  transition: color .15s, opacity .15s;
}
.socials a:hover {
  color: var(--acc);
  opacity: 1;
}
.hidden {
  display: none !important;
  /*position: absolute !important;
  z-index: -9999 !important;
  top: -20404px !important;
  opacity: 0 !important;*/
}