/* Acelera Maker — aparência (gerado; edite pelo painel em Admin → Aparência) */
:root {
  --zh-accent: #5A97EE;
  --zh-accent-rgb: 90,151,238;
  --zh-accent2: #5A97EE;
  --zh-accent2-rgb: 90,151,238;
  --zh-grad1: #1E63C8;
  --zh-grad1-rgb: 30,99,200;
  --zh-grad2: #5A97EE;
  --zh-grad2-rgb: 90,151,238;
  --zh-bg: #0A0F1A;
  --zh-bg-rgb: 10,15,26;
  --zh-surface: #111826;
  --zh-surface-rgb: 17,24,38;
  --zh-surface2: #18202F;
  --zh-surface-2: #18202F;
  --zh-surface2-rgb: 24,32,47;
  --zh-border: rgba(152,170,196, .18);
  --zh-border-strong: rgba(152,170,196, .34);
  --zh-text: #EAF1FB;
  --zh-text-rgb: 234,241,251;
  --zh-muted: #98AAC4;
  --zh-muted-rgb: 152,170,196;
  --zh-text-muted: #98AAC4;
  --zh-text-subtle: #98AAC4;
  --zh-brand: #1E63C8;
  --zh-brand-rgb: 30,99,200;
  --zh-brand-hover: #2E78E6;
  --zh-ring: #5A97EE;
  --zh-success: #34D399;
  --zh-danger: #F47272;
  --zh-warning: #F5B544;
  --zh-info: #5A97EE;
  --zh-radius: 14px;
  --zh-glow: 0;
}

.hero-video-bg {
  filter: none;
  opacity: 1;
  display: none;
}

/* Acelera Safira — camada específica */
/* Acelera Maker · Safira Clean
   Esta folha e anexada por /theme.css somente quando o preset Acelera esta ativo. */

:root {
  color-scheme: dark;
  --zh-border: rgba(255, 255, 255, .07);
  --zh-border-strong: rgba(255, 255, 255, .14);
  --zh-shadow-sm: 0 1px 2px rgba(5, 21, 43, .24);
  --zh-shadow-md: 0 8px 24px -8px rgba(5, 21, 43, .42);
  --zh-shadow-lg: 0 24px 60px -16px rgba(5, 21, 43, .58);
}

html:root,
html:root body {
  --z-bg: var(--zh-bg);
  --z-bg-2: var(--zh-surface);
  --z-card: var(--zh-surface);
  --z-card-hi: var(--zh-surface-2);
  --z-line: var(--zh-border);
  --z-line-soft: var(--zh-border);
  --z-fg: var(--zh-text);
  --z-fg-2: var(--zh-text-muted);
  --z-fg-3: var(--zh-text-muted);
  --z-fg-4: var(--zh-text-muted);
  --z-acc: var(--zh-brand);
  --z-acc-rgb: var(--zh-brand-rgb);
  --z-acc2: var(--zh-accent2);
  --z-r: var(--zh-radius);
  background: var(--zh-bg);
  color: var(--zh-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

html body ::selection {
  color: #fff;
  background: rgba(var(--zh-accent-rgb), .55);
}

html body :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--zh-ring) !important;
  outline-offset: 2px;
}

html body :where(button, a, input, select, textarea) {
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}

html body img[src="/logo.png"],
html body img[src="/favicon.png"] {
  content: url("/acelera-lettermark.svg");
}

html body img[src="/bgloading.png"] {
  content: url("/acelera-loading.svg");
}

/* Login e primeiro acesso: ground claro, sem WebGL ou particulas. */
html body.pagina-login {
  color-scheme: light;
  color: #15233b;
  background: #f7f9fc !important;
}

html body.pagina-login #gl-bg,
html body.pagina-login #particles,
html body.pagina-login .bg-overlay {
  display: none !important;
}

html body.pagina-login .main {
  isolation: isolate;
  padding: 24px;
  background: linear-gradient(145deg, #fff 0%, #f7f9fc 50%, #eaf1fb 100%);
}

html body.pagina-login .main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/acelera-hero.svg") center / cover no-repeat;
  opacity: .42;
}

html body.pagina-login .card {
  max-width: 430px;
  padding: 38px;
  color: #15233b;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  box-shadow: var(--zh-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body.pagina-login .logo-img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

html body.pagina-login .logo-title {
  color: #15233b;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: 0;
  font-weight: 700;
  letter-spacing: -.03em;
}

html body.pagina-login .logo-title::after {
  content: "Acelera Maker";
  font-size: 24px;
}

html body.pagina-login .logo-sub,
html body.pagina-login .form-label,
html body.pagina-login .form-hint {
  color: #5b6b7f;
}

html body.pagina-login .form-input {
  min-height: 44px;
  color: #15233b;
  background: #fff;
  border: 1px solid #c9d3e0;
  border-radius: 10px;
  box-shadow: var(--zh-shadow-sm);
}

html body.pagina-login .form-input::placeholder { color: #8493a6; }
html body.pagina-login .form-input:focus { border-color: var(--zh-ring); }
html body.pagina-login .form-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #15233b !important;
  border-color: #c9d3e0 !important;
}

html body.pagina-login .btn-primary {
  min-height: 44px;
  color: #fff;
  background: var(--zh-brand);
  border: 1px solid var(--zh-brand);
  border-radius: 10px;
  box-shadow: var(--zh-shadow-sm);
}

html body.pagina-login .btn-primary:hover {
  background: var(--zh-brand-hover);
  border-color: var(--zh-brand-hover);
}

html body.pagina-login .btn-primary:disabled {
  color: #8493a6;
  background: #eef2f8;
  border-color: #e4eaf2;
}

html body.pagina-login .btn-success {
  color: #fff;
  background: #188056;
  border-color: #188056;
}

html body.pagina-login .badge {
  color: #154494;
  background: #eaf1fb;
  border: 1px solid #d3e2f7;
  box-shadow: none;
  backdrop-filter: none;
}

html body.pagina-login .badge::before { display: none; }
html body.pagina-login .badge-text {
  color: #154494;
  background: none;
  -webkit-text-fill-color: currentColor;
}

html body.pagina-login .auth-tab {
  min-height: 44px;
  color: #5b6b7f;
  background: #f7f9fc;
  border-color: #e4eaf2;
}

html body.pagina-login .auth-tab.active {
  color: #154494;
  background: #eaf1fb;
  border-color: #a9c6ef;
}

html body.pagina-login .terminal {
  color: #c9d3e0;
  background: #0a0f1a;
  border-color: #18202f;
}

html body.pagina-login .footer {
  color: #65758c;
  font-size: 0;
}

html body.pagina-login .footer::after {
  content: "IA na sua empresa em semanas: direção, implementação e resultado.";
  font-size: 10px;
}

/* Produto: remove repertorio cosmico e usa planos safira discretos. */
html body .hero-video-bg,
html body .hero-stars,
html body .hero-circles,
html body .hero-glow,
html body .prompt-border-spin,
html body .prompt-neon,
html body .prompt-neon-spin {
  display: none !important;
}

html body .hero-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/acelera-hero.svg") center 18% / min(1100px, 100%) auto no-repeat;
  opacity: .62;
}

html body .hero-mask {
  background: linear-gradient(180deg, rgba(30, 99, 200, .08), transparent 62%);
}

html body .sidebar {
  background: #0a0f1a;
  border-color: var(--zh-border);
}

html body .sidebar-logo,
html body .sidebar > div:first-child {
  border-color: var(--zh-border) !important;
}

html body .sidebar-logo-text {
  color: var(--zh-text) !important;
  font-size: 0 !important;
  letter-spacing: -.02em;
}

html body .sidebar-logo-text::after {
  content: "Acelera Maker";
  font-size: 14px;
  font-weight: 650;
}

html body .sidebar > div:first-child > span:not(.chip):not([id]) {
  color: var(--zh-text) !important;
  font-size: 0 !important;
  letter-spacing: -.02em;
}

html body .sidebar > div:first-child > span:not(.chip):not([id])::after {
  content: "Acelera Maker";
  font-size: 14px;
  font-weight: 650;
}

html body .sidebar-link,
html body .sidebar-recent { color: var(--zh-text-muted); }
html body .sidebar-link:hover,
html body .sidebar-recent:hover {
  color: var(--zh-text);
  background: rgba(255, 255, 255, .045);
}

html body .sidebar-link.active {
  color: var(--zh-text);
  background: rgba(var(--zh-accent-rgb), .16);
  box-shadow: inset 2px 0 0 var(--zh-accent2);
}

html body .sidebar-section { color: var(--zh-text-muted); }

html body .sidebar-collapse-btn {
  color: var(--zh-text-muted);
  background: var(--zh-surface);
  border-color: var(--zh-border-strong);
}

html body .prompt-wrapper { border-radius: 18px; }
html body .prompt-border-wrap { display: block; border: 1px solid var(--zh-border-strong); }
html body .prompt-border-fill {
  inset: 0;
  background: rgba(17, 24, 38, .96);
  border-radius: 17px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body .prompt-box { color: var(--zh-text); }

html body .hero-badge,
html body .page-badge {
  color: var(--zh-accent2);
  background: rgba(var(--zh-accent-rgb), .12);
  border: 1px solid rgba(var(--zh-accent2-rgb), .22);
  box-shadow: none;
  backdrop-filter: none;
}

html body .hero-badge::after { display: none; }
html body .hero-badge-text {
  color: var(--zh-accent2);
  background: none;
  -webkit-text-fill-color: currentColor;
}

html body .btn-primary,
html body .z-btn.primario {
  color: #fff;
  background: var(--zh-brand);
  border-color: var(--zh-brand);
  box-shadow: var(--zh-shadow-sm);
  backdrop-filter: none;
}

html body .btn-primary::before,
html body .btn-primary::after,
html body .btn-primary-border { display: none; }
html body .btn-primary:hover,
html body .z-btn.primario:hover {
  color: #fff;
  background: var(--zh-brand-hover);
  border-color: var(--zh-brand-hover);
}

html body .proj-card,
html body .skill-card,
html body .theme-card,
html body .card,
html body .stat-card,
html body .interaction-card,
html body .z-card,
html body .z-stat,
html body .z-item {
  background: var(--zh-surface);
  border: 1px solid var(--zh-border);
  border-radius: var(--zh-radius);
  box-shadow: var(--zh-shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body .proj-card:hover,
html body .skill-card:hover,
html body .theme-card:hover,
html body .stat-card:hover,
html body .z-stat:hover,
html body .z-item:hover {
  background: var(--zh-surface-2);
  border-color: var(--zh-border-strong);
  box-shadow: var(--zh-shadow-md);
  transform: translateY(-1px);
}

html body .page-title,
html body .modal h3,
html body .prose-chat :where(h1, h2, h3, h4) {
  color: var(--zh-text);
  background: none;
  -webkit-text-fill-color: currentColor;
  letter-spacing: -.03em;
}

html body .page-sub,
html body .stat-label,
html body .stat-hint,
html body .modal .msub,
html body .proj-info p,
html body .skill-desc { color: var(--zh-text-muted) !important; }

html body :where(input, select, textarea, .inp, .z-in) {
  color: var(--zh-text);
  background-color: var(--zh-surface-2);
  border-color: var(--zh-border-strong);
}

html body :where(input, textarea, .inp, .z-in)::placeholder { color: var(--zh-text-muted); }

html body :where(input, select, textarea, .inp, .z-in):focus {
  border-color: var(--zh-ring);
  box-shadow: 0 0 0 3px rgba(var(--zh-accent2-rgb), .16);
}

html body .overlay,
html body .z-overlay { background: rgba(5, 21, 43, .78); }
html body .modal,
html body .z-modal {
  color: var(--zh-text);
  background: var(--zh-surface);
  border-color: var(--zh-border-strong);
  box-shadow: var(--zh-shadow-lg);
  backdrop-filter: none;
}

html body .chip-purple,
html body .z-chip.acento {
  color: var(--zh-accent2);
  background: rgba(var(--zh-accent-rgb), .16);
}

html body #desktop-header,
html body .mobile-header {
  background: rgba(10, 15, 26, .98) !important;
  border-color: var(--zh-border) !important;
  box-shadow: 0 1px 0 var(--zh-border);
  backdrop-filter: none !important;
}

html body #desktop-header img[src="/logo.png"] { border-radius: 9px !important; }

html body #preview-empty > img[src="/bgloading.png"] {
  opacity: .78 !important;
  object-fit: cover;
}

html body #preview-empty > div:last-of-type > div:first-child > span {
  color: var(--zh-accent2) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 0 !important;
}

html body #preview-empty > div:last-of-type > div:first-child > span::after {
  content: "Acelera Maker está trabalhando";
  font-size: 12px;
}

html body #split-container,
html body #chat,
html body #chat-panel,
html body #preview-panel,
html body #ide-content { background: var(--zh-bg); }

html body #chat-form > div:last-child,
html body .sel-menu,
html body .eff-pop,
html body .ac-popup {
  color: var(--zh-text);
  background: var(--zh-surface) !important;
  border-color: var(--zh-border-strong) !important;
  box-shadow: var(--zh-shadow-md);
  backdrop-filter: none !important;
}

html body #send-btn:not(:disabled),
html body #publish-btn {
  color: #fff;
  background: var(--zh-brand);
  box-shadow: var(--zh-shadow-sm);
}

html body #send-btn:not(:disabled):hover,
html body #publish-btn:hover { background: var(--zh-brand-hover); }

html body .prose-chat { color: var(--zh-text-muted); }
html body .prose-chat strong { color: var(--zh-text); }
html body .prose-chat a { color: var(--zh-accent2); }
html body .prose-chat blockquote {
  color: var(--zh-text-muted);
  background: rgba(var(--zh-accent-rgb), .07);
  border-color: var(--zh-accent2);
}

html body .code-block,
html body .logbox {
  color: var(--zh-text-muted);
  background: #07101d;
  border-color: var(--zh-border-strong);
  box-shadow: none;
}

html body table :where(th, td),
html body table.z-tab :where(th, td) { border-color: var(--zh-border); }
html body table th,
html body table.z-tab th { color: var(--zh-text-muted); }
html body table td,
html body table.z-tab td { color: var(--zh-text-muted); }

html body .z-side {
  background: #0a0f1a;
  border-color: var(--zh-border);
}

html body .z-marca-txt {
  font-size: 0;
  color: var(--zh-text);
}

html body .z-marca-txt::after {
  content: "Acelera Maker";
  font-size: 14px;
  font-weight: 650;
}

html body .z-side-pe .z-nav-txt {
  font-size: 0;
}

html body .z-side-pe .z-nav-txt::after {
  content: "Voltar à Acelera Maker";
  font-size: 13.2px;
}

html body .z-topo,
html body .z-rodape,
html body .z-modal-cab { border-color: var(--zh-border); }

html body .fade-in,
html body .msg-in { animation-duration: 280ms; }

@media (max-width: 768px) {
  html body.pagina-login .main { padding: 16px; }
  html body.pagina-login .card { padding: 28px 22px; }

  html body :where(button, [role="button"], .sidebar-link, .z-btn, .btn, .auth-tab) {
    min-height: 44px;
  }

  html body .hero-zone::before {
    background-position: 58% 8%;
    background-size: auto 72%;
    opacity: .45;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}