/* Dark Theme (Etapa 3) — separado para facilidade de manutenção. Ativado via data-theme="dark" no (theme.js). */ /* ===== Editor (styles.css) ===== */ html[data-theme="dark"] { --bg: #1c1c1e; --bg-panel: #2c2c2e; --border: #3a3a3c; --text: #f5f5f7; --text-muted: #98989f; --accent: #0a84ff; --accent-hover: #409cff; --magic: #0a84ff; --magic-hover: #409cff; --error-bg: #3a2020; } html[data-theme="dark"] .app-header, html[data-theme="dark"] .sidebar, html[data-theme="dark"] .sidebar__footer { background: var(--bg-panel); } html[data-theme="dark"] .global-nav { background-color: #2c2c2e; } html[data-theme="dark"] .nav-item.is-active { background: var(--accent); } html[data-theme="dark"] .btn { background: var(--bg-panel); border-color: var(--border); } html[data-theme="dark"] .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } html[data-theme="dark"] .btn--secondary { background: #3a3a3c; } html[data-theme="dark"] .btn--ghost:hover { background: #3a3a3c; color: var(--text); } html[data-theme="dark"] .field input[type="number"], html[data-theme="dark"] .field select { background: var(--bg-panel); color: var(--text); border-color: var(--border); } html[data-theme="dark"] .preset-btn { background: var(--bg-panel); border-color: var(--border); } html[data-theme="dark"] .preset-btn:hover { background: #3a3a3c; } html[data-theme="dark"] .preset-btn.is-active { background: #143d5e; border-color: var(--accent); } html[data-theme="dark"] .stage { background: var(--bg); } html[data-theme="dark"] .stage__canvas-wrap { background: repeating-conic-gradient(#1c1c1e 0% 25%, #222 0% 50%) 50% / 16px 16px; } html[data-theme="dark"] .output-summary-mini { background: #3a3a3c; } html[data-theme="dark"] .badge { background: #3a3a3c; color: var(--text-muted); } html[data-theme="dark"] .spinner { border-color: rgba(10, 132, 255, 0.2); border-top-color: var(--accent); } /* ===== FASE 1 — HUB (styles.css) ===== */ html[data-theme="dark"] .hub-body { background: var(--bg); } html[data-theme="dark"] .hero { background: linear-gradient(180deg, #14304a 0%, var(--bg) 100%); } html[data-theme="dark"] .hero__privacy { background: rgba(10, 132, 255, 0.15); color: #409cff; } html[data-theme="dark"] .hero.is-dragover .hero__drop { background: #143d5e; } html[data-theme="dark"] .tool-card { background: var(--bg-panel); border-color: var(--border); } html[data-theme="dark"] .tool-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .tool-card--featured { background: linear-gradient(160deg, var(--bg-panel) 0%, #14304a 100%); border-color: rgba(10, 132, 255, 0.3); } html[data-theme="dark"] .tool-card--batch { background: linear-gradient(160deg, var(--bg-panel) 0%, #3a2e1f 100%); border-color: rgba(255, 149, 0, 0.3); } html[data-theme="dark"] .trust__item { background: var(--bg-panel); border-color: var(--border); } html[data-theme="dark"] .hub__footer { border-color: var(--border); } html[data-theme="dark"] .crop-shade { background: rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .crop-handle { background: #fff; border-color: var(--accent); } /* ===== FASE 1 v2 — REDESIGN HUB (dark) ===== */ html[data-theme="dark"] .hero { background: linear-gradient(180deg, #0d1b2e 0%, #14213d 40%, var(--bg) 100%); } html[data-theme="dark"] .hero__glow--1 { background: radial-gradient(circle, rgba(10, 132, 255, 0.18) 0%, transparent 70%); } html[data-theme="dark"] .hero__glow--2 { background: radial-gradient(circle, rgba(88, 86, 214, 0.16) 0%, transparent 70%); } html[data-theme="dark"] .hero__glow--3 { background: radial-gradient(circle, rgba(0, 102, 204, 0.14) 0%, transparent 70%); } html[data-theme="dark"] .hero__search input { background: rgba(44, 44, 46, 0.9); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .hero__search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15); } html[data-theme="dark"] .hero__search-kbd { background: #3a3a3c; color: var(--text-muted); border-color: var(--border); } html[data-theme="dark"] .chip { background: rgba(44, 44, 46, 0.8); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(10, 132, 255, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .recent-item { background: var(--bg-panel); border-color: var(--border); } html[data-theme="dark"] .recent-item:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .recent-item__thumb { background: #1c1c1e; border-color: var(--border); } html[data-theme="dark"] .recent-item__tool-badge { background: rgba(0, 0, 0, 0.85); } html[data-theme="dark"] .tool-card__icon svg { filter: drop-shadow(0 0 12px rgba(10, 132, 255, 0.25)); } html[data-theme="dark"] .global-drop { background: rgba(0, 5, 15, 0.55); } html[data-theme="dark"] .global-drop__inner { background: rgba(20, 33, 61, 0.6); border-color: rgba(10, 132, 255, 0.4); }