:root{
  --ink: #060a13;
  --panel: #0e1c30;
  --panel-line: #16283f;
  --river: #2f6fa8;
  --river-light: #7fd1ff;
  --confluence: #f2b134;
  --text: #eaf2fb;
  --muted: #8fa6bf;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

*{ box-sizing: border-box; }

[hidden]{ display: none !important; }

body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
}

button{ font-family: inherit; }

input, textarea{
  width:100%;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 9px 11px;
}

input:focus, textarea:focus{
  outline: 2px solid var(--river-light);
  outline-offset: 1px;
}

label{
  display:flex;
  align-items:center;
  gap: 6px;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ---------- Ponto de info ---------- */

.info-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--panel-line);
  font-size: .68rem;
  color: var(--muted);
  cursor: help;
  position: relative;
}

.global-tooltip{
  position: fixed;
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .78rem;
  color: var(--text);
  z-index: 100;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s ease;
}
.global-tooltip.visible{ opacity: 1; }

/* ---------- Botão Nostr (reaproveitado do landing) ---------- */

.nostr-btn{
  font-size: .82rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 8px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.nostr-btn[data-state="connected"]{ border-color: var(--confluence); color: var(--confluence); }
.nostr-btn[data-state="error"]{ border-color: #b85c5c; color: #e2a3a3; }
.nostr-btn.corner{ position: fixed; top: 20px; right: 20px; z-index: 5; }

.import-shortcut{
  font-size: .82rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 8px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.import-shortcut.corner-left{ position: fixed; top: 20px; left: 20px; z-index: 5; }

.import-shortcut-status{
  position: fixed;
  top: 60px;
  left: 20px;
  z-index: 5;
  font-size: .78rem;
  color: var(--muted);
  max-width: 220px;
  margin: 0;
}

/* ==================== ETAPA 0: setup ==================== */

.setup{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 60px 20px;
}

.setup-inner{ max-width: 640px; text-align:center; }

.setup h1{ font-size: 2rem; margin: 0 0 8px; }
.setup-sub{ color: var(--muted); margin: 0 0 28px; }

.mode-cards, .theme-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mode-card, .theme-card{
  text-align:left;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  padding: 20px;
  cursor:pointer;
  color: var(--text);
  transition: border-color .15s ease;
}
.mode-card:hover, .theme-card:hover{ border-color: var(--river-light); }
.mode-card.selected, .theme-card.selected{ border-color: var(--confluence); }

.mode-card h2{ margin: 0 0 8px; font-size: 1.1rem; }
.mode-card p{ margin:0; color: var(--muted); font-size: .9rem; }

.theme-step{ margin-top: 34px; }

.theme-card h3{ margin: 0 0 6px; font-size: 1rem; }
.theme-card p{ margin: 0; color: var(--muted); font-size: .85rem; }

/* ==================== EDITOR ==================== */

.editor{ min-height: 100vh; display:flex; flex-direction:column; }

.fullscreen-exit-btn{
  display:none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 60;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: .82rem;
}

.editor.fullscreen-preview .editor-topbar{ display:none; }
.editor.fullscreen-preview .editor-panel{ display:none; }
.editor.fullscreen-preview .editor-preview{ position:fixed; inset:0; z-index:55; }
.editor.fullscreen-preview .fullscreen-exit-btn{ display:block; }

.editor-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--panel-line);
}

.editor-brand{ font-weight:700; }
.editor-mode-tag{
  font-size: .72rem;
  color: var(--muted);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: 6px;
}

.editor-topbar-actions{ display:flex; gap: 10px; align-items:center; }

.swap-btn, .export-btn{
  border: 1px solid var(--panel-line);
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 8px 13px;
  cursor: pointer;
  font-size: .82rem;
}

.export-btn{ background: var(--confluence); color:#1a1204; border-color: var(--confluence); font-weight:700; }

.editor-body{
  flex:1;
  display:flex;
  min-height: 0;
}

.editor-panel{
  width: 420px;
  flex-shrink:0;
  border-right: 1px solid var(--panel-line);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.editor-preview{
  flex:1;
  background: #000;
  display:flex;
}

#preview-frame{
  flex:1;
  border:none;
  background: #fff;
}

/* trocar lado */
.editor-body.swapped{ flex-direction: row-reverse; }
.editor-body.swapped .editor-panel{ border-right:none; border-left: 1px solid var(--panel-line); }

/* ---------- Abas ---------- */

.tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 14px 0;
  border-bottom: 1px solid var(--panel-line);
}

.tab-btn{
  background: none;
  border: none;
  color: var(--muted);
  padding: 8px 10px;
  font-size: .82rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn.active{ color: var(--text); border-bottom-color: var(--confluence); }

.tab-panels{ flex:1; overflow-y:auto; padding: 18px 20px 60px; }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.panel-hint{ color: var(--muted); font-size: .85rem; margin: 0 0 16px; }
.panel-hint.small{ font-size: .78rem; margin: 6px 0 0; }

.field{ margin-bottom: 16px; }

.toggle{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.toggle input{ width:auto; }

.quick-fieldset{
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.quick-fields{ margin-top: 10px; display:flex; flex-direction:column; gap:8px; }

.image-picker{ display:flex; flex-direction:column; gap:6px; margin: 2px 0 6px; }
.image-picker-row{ display:flex; align-items:center; gap:8px; }

.browse-btn{
  border: 1px dashed var(--panel-line);
  background: none;
  color: var(--river-light);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: .82rem;
  flex: 1;
  text-align: center;
}

.image-chosen{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 1;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .82rem;
  color: var(--text);
}
.image-chosen-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.remove-img-btn{
  background:none;
  border: 1px solid var(--panel-line);
  color: var(--muted);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  flex-shrink:0;
  cursor:pointer;
}
.remove-img-btn:hover{ color: #e2a3a3; border-color:#b85c5c; }

.add-btn{
  border: 1px dashed var(--panel-line);
  background: none;
  color: var(--river-light);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  width: 100%;
  font-size: .85rem;
}

.speed-field{ margin-top: 14px; }
.speed-row{ display:flex; align-items:center; gap:8px; }
.speed-row input[type="range"]{ flex:1; width:auto; padding:0; }
.speed-row input[type="number"]{ width: 64px; text-align:center; }
.speed-unit{ color: var(--muted); font-size: .82rem; }
.speed-ticks{ display:flex; justify-content:space-between; margin-top: 4px; font-size: .72rem; color: var(--muted); }

.bg-type-tabs{ display:flex; gap:8px; margin-bottom:10px; }
.bg-type-btn{
  flex:1;
  border: 1px solid var(--panel-line);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .82rem;
  cursor: pointer;
}
.bg-type-btn.active{
  color: var(--text);
  border-color: var(--confluence);
  background: rgba(242,177,52,.08);
}

.bg-type-panel{ display:flex; flex-direction:column; gap:8px; }

.field-row{ display:flex; gap:8px; }
.field-row input[type="color"]{ flex:1; height:40px; padding:2px; }

.swatch-row{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--panel-line);
  cursor: pointer;
  padding:0;
}
.swatch.active{ outline: 2px solid var(--confluence); outline-offset: 2px; }

select{
  width:100%;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 9px 11px;
}
.static-list{ color: var(--muted); font-size: .88rem; padding-left: 18px; }
.static-list li{ margin-bottom: 6px; }

.link-item, .banner-item{
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.link-item-row{ display:flex; gap: 8px; align-items:center; }
.remove-btn{
  background:none;
  border: 1px solid var(--panel-line);
  color: var(--muted);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  flex-shrink:0;
  cursor:pointer;
}

/* ==================== Exportar (modal) ==================== */

.export-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 40;
}

.export-box{
  position:relative;
  width: min(92vw, 420px);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  padding: 26px 22px;
}

.export-box h2{ margin: 0 0 12px; font-size: 1.2rem; }
.export-box p{ color: var(--muted); font-size: .9rem; }
.export-box code{ font-family: var(--mono); color: var(--river-light); }

.export-box .close{
  position:absolute;
  top: 14px;
  right: 14px;
  background:none;
  border:none;
  color: var(--muted);
  cursor:pointer;
  font-size: 1rem;
}

.cta{
  display:block;
  width:100%;
  text-align:center;
  background: var(--confluence);
  color: #1a1204;
  font-weight:700;
  border:none;
  border-radius: 10px;
  padding: 12px;
  cursor:pointer;
  margin: 14px 0 20px;
}

.export-next ul{ padding-left: 18px; margin: 8px 0 0; }
.export-next a{ color: var(--river-light); font-size: .88rem; }

/* ==================== Responsivo ==================== */

@media (max-width: 900px){
  .editor-body{ flex-direction: column; }
  .editor-panel{ width: 100%; border-right:none; border-bottom: 1px solid var(--panel-line); max-height: 55vh; }
  .editor-preview{ min-height: 45vh; }
  .mode-cards, .theme-cards{ grid-template-columns: 1fr; }
}