:root{
--bg: #0b1222;
    --fg: #eaf2ff;
    --card: #0f172a;
    --muted: #7c8aa5;
    --primary: #3b82f6;
    --secondary: #22d3ee;
    --border: #1f2a44;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.appbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: saturate(1.1) blur(6px);
  background: rgba(15,23,42,.85);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
}
.brand{ display:flex; gap:12px; align-items:center }
.brand .logo{ width:34px; height:34px; border-radius:8px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 6px 16px rgba(59,130,246,.35);
}
.brand .sub{ font-size:12px; color:var(--muted) }
.actions .btn{ margin-left:8px }

.wrap{ max-width:1200px; margin:0 auto; padding:14px 12px }
main.wrap{ display:flex; gap:12px; align-items:flex-start }

.sidebar{
  width:340px; flex:0 0 340px;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px;
}
.stage{ flex:1; border:1px solid var(--border); border-radius:12px; overflow:hidden; min-height:600px; background:#0002 }
#previewFrame{ width:100%; height:70vh; border:0; background:#fff }

.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px }
.tab{ appearance:none; border:1px solid var(--border); background:#0b1222; color:var(--fg);
  padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:700; font-size:12px;
}
.tab.active{ background:var(--primary); border-color:var(--primary) }

.panel{}
.panel.hidden{ display:none }
.panel h3{ margin:6px 0 6px; font-size:14px }
.panel .row{ display:flex; gap:10px; align-items:center; margin:8px 0; flex-wrap:wrap }
.panel input[type="text"], .panel input[type="number"], .panel select, .panel textarea{
  width:100%; background:#0b1222; color:var(--fg); border:1px solid var(--border);
  border-radius:10px; padding:10px; font:14px/1.3 Inter, system-ui; outline:none;
}
.panel textarea{ min-height:140px }

.btn{ appearance:none; border:1px solid transparent; background:var(--primary); color:#fff;
  font-weight:700; border-radius:10px; padding:10px 12px; cursor:pointer;
}
.btn:hover{ filter:brightness(1.08) }
.btn.ghost{ background:transparent; border-color:var(--border) }
.btn.small{ padding:7px 10px; font-size:12px }

.muted{ color:var(--muted) }

.menu-editor .menu-list{ list-style:none; margin:8px 0 0; padding:0 }
.menu-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px dashed var(--border);
  border-radius:10px; margin-bottom:6px; background:#0b1222; cursor:grab;
}
.menu-item .label{ flex:1 }
.menu-item .actions .btn{ margin-left:6px }
.menu-sub{ list-style:none; margin:6px 0 0 16px; padding:0 }

.widgets-lib{ display:flex; flex-wrap:wrap; gap:6px }
.widget-pill{ background:#0b1222; border:1px solid var(--border); border-radius:999px; padding:6px 10px;
  cursor:grab; font-size:12px;
}
.widgets-canvas{ min-height:200px; padding:10px; border:1px dashed var(--border); border-radius:10px; background:#0b1222 }
.canvas-item{ border:1px solid var(--border); border-radius:10px; padding:8px; background:#0f172a; margin-bottom:6px }
.canvas-item .title{ font-size:12px; color:var(--muted) }
.canvas-item .cfg{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap }
.canvas-item input[type="text"], .canvas-item textarea{ background:#0b1222 }

.foot{ border-top:1px solid var(--border); margin-top:10px; padding:16px 0; background:#0b1222 }

header.appbar,.wrap,.widget,body{background-repeat:no-repeat;background-size:cover;background-position:center}

/* Coloque no final do assets/css/style.css */
.wrap,
#content-container,
.main,
main,
.container,
#content {
    min-height: 40vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* assets/css/style.css */
.site-header,
#site-header,
header.header,
.navbar,
.menu-bar,
.top-menu,
nav.primary,
.nav-primary {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.wrap,
#content-container,
.main,
main,
.container,
#content {
    min-height: 40vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* wrappers de logo comuns */
.brand .logo,
.site-branding .logo,
.site-logo,
.brand,
.logo {
    display: inline-block;
    min-width: 120px;
    min-height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

/* Padrão do topo (menus/logo) na PRÉVIA: fundo branco, texto preto */
.site-header,
#site-header,
header.header,
.navbar,
.menu-bar,
.top-menu,
nav.primary,
.nav-primary {
    background-color: #ffffff !important;
    color: #111111 !important;
}

/* Links e itens do menu pretos por padrão */
.site-header a,
#site-header a,
header.header a,
.navbar a,
.menu-bar a,
.top-menu a,
nav.primary a,
.nav-primary a {
    color: #111111 !important;
}

/* Título/branding pretos por padrão */
.site-title,
.site-branding,
.brand,
.logo {
    color: #111111 !important;
}