:root {
  /* Paleta Vibrante e Jovem */
  --bg: #0f0a1f;
  --bg-2: #1a1033;
  --panel: #1e1640;
  --panel-2: #150d30;
  --primary: #8B5CF6;
  --secondary: #06B6D4;
  --accent: #F59E0B;
  --accent-2: #06B6D4;
  --accent-3: #EF4444;
  --pink: #EC4899;
  --success: #10B981;
  --warning: #FBBF24;
  --text: #F8FAFC;
  --muted: #94A3B8;
  --shadow: 0 24px 60px rgba(139, 92, 246, 0.15);
  --radius: 20px;

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #8B5CF6, #EC4899);
  --gradient-secondary: linear-gradient(135deg, #06B6D4, #10B981);
  --gradient-accent: linear-gradient(135deg, #F59E0B, #EF4444);
  --gradient-bg: linear-gradient(180deg, #0f0a1f 0%, #1a1033 50%, #0f0a1f 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Space Grotesk", "Sora", system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(139, 92, 246, 0.15) 0%, transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(236, 72, 153, 0.12) 0%, transparent 60%),
    radial-gradient(800px 500px at 50% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
    var(--bg);
  min-height: 100vh;
}

/* Banner Versão 2 */
.v2-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  position: relative;
  z-index: 1000;
  animation: pulse-banner 2s ease-in-out infinite;
  transition: all 0.3s ease;
}

.v2-banner:hover {
  background: linear-gradient(135deg, #7C3AED, #DB2777);
  transform: scale(1.01);
}

@keyframes pulse-banner {
  0%, 100% { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(236, 72, 153, 0.6); }
}

@media (max-width: 600px) {
  .v2-banner {
    font-size: 13px;
    padding: 10px 15px;
  }
}

.noise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.06'/></svg>");
  pointer-events: none;
  z-index: 0;
}

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  padding: 48px 8vw 24px;
  position: relative;
  z-index: 1;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  color: var(--muted);
  background: rgba(10, 12, 20, 0.6);
}

.hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  margin: 12px 0;
}

.hero p { color: var(--muted); line-height: 1.6; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}

.btn {
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn--primary {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4);
  position: relative;
  overflow: hidden;
}

.btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn--primary:hover::before {
  left: 100%;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn--success {
  background: var(--gradient-secondary);
  color: #fff;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);
}

.btn--danger {
  background: linear-gradient(140deg, var(--accent-3), #ef4444);
  color: #fff;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.hero__stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.hero__stats div {
  background: rgba(16, 21, 36, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: 12px;
}

.hero__stats span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.hero__panel {
  display: grid;
  gap: 16px;
}

.panel__card {
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
}

.panel__card--highlight {
  border-color: rgba(125, 223, 242, 0.5);
  background: linear-gradient(160deg, rgba(125, 223, 242, 0.15), rgba(19, 26, 46, 0.95));
}

.panel__tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.menu {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px 8vw;
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(11, 14, 22, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.menu__item {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.menu__item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.menu__item.is-active {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.container {
  padding: 24px 8vw 60px;
  position: relative;
  z-index: 1;
}

.section { display: none; }
.section.is-visible { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.section__header h2 { margin: 0 0 8px; font-size: 28px; }
.section__header p { color: var(--muted); margin-top: 0; }

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 18px 0 24px;
  background: rgba(16, 21, 36, 0.6);
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.controls label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.controls input,
.controls select,
.controls textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 10, 18, 0.85);
  color: var(--text);
  font-size: 14px;
}

.controls input:focus,
.controls select:focus,
.controls textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.cards,
.progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* JOGOS & MODOS - Visual melhorado */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.card,
.progress-card,
.side-card {
  background: linear-gradient(160deg, rgba(19, 26, 46, 0.95), rgba(10, 14, 24, 0.95));
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
}

.mode-card {
  background: linear-gradient(160deg, rgba(30, 22, 64, 0.95), rgba(21, 13, 48, 0.95));
  padding: 24px;
  border-radius: var(--radius);
  border: 2px solid rgba(139, 92, 246, 0.2);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.mode-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mode-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mode-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--primary);
  box-shadow: 0 30px 60px rgba(139, 92, 246, 0.25), 0 0 40px rgba(236, 72, 153, 0.1);
}

.mode-card:hover::before,
.mode-card:hover::after {
  opacity: 1;
}

.mode-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.mode-card .mode-icon {
  font-size: 24px;
}

.mode-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.mode-card .mode-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mode-card .mode-tag.popular {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.2));
  color: var(--pink);
}

.mode-card .mode-tag.new {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(16, 185, 129, 0.2));
  color: var(--secondary);
}

.mode-card .mode-tag.challenge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(239, 68, 68, 0.2));
  color: var(--accent);
}

.mode-card .mode-tag.battle {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(236, 72, 153, 0.2));
  color: #ff6b9d;
}

.playground {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(220px, 0.7fr);
  gap: 18px;
}

.playground__card {
  background: linear-gradient(160deg, rgba(19, 26, 46, 0.95), rgba(10, 14, 24, 0.95));
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.playground__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.playground__meta span {
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 20px;
}

.question-box {
  margin: 24px 0;
  font-size: 20px;
  line-height: 1.6;
  min-height: 80px;
}

.answer-box {
  padding: 16px;
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  margin-bottom: 16px;
}

.answer-box.is-hidden { display: none; }

/* Input para modo preencher */
.fill-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 10, 18, 0.85);
  color: var(--text);
  font-size: 16px;
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}

.fill-input:focus {
  outline: none;
  border-color: var(--accent);
}

.fill-input.correct {
  border-color: var(--success);
  background: rgba(74, 222, 128, 0.1);
}

.fill-input.wrong {
  border-color: var(--accent-3);
  background: rgba(255, 107, 107, 0.1);
}

/* Timer para desafio */
.timer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.timer {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.timer.warning {
  color: var(--warning);
  animation: pulse 0.5s ease infinite;
}

.timer.danger {
  color: var(--accent-3);
  animation: pulse 0.3s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Flashcard */
.flashcard {
  perspective: 1000px;
  min-height: 200px;
  margin: 20px 0;
}

.flashcard__inner {
  position: relative;
  width: 100%;
  min-height: 200px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.flashcard.flipped .flashcard__inner {
  transform: rotateY(180deg);
}

.flashcard__front,
.flashcard__back {
  position: absolute;
  width: 100%;
  min-height: 200px;
  backface-visibility: hidden;
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flashcard__front {
  background: linear-gradient(160deg, rgba(30, 40, 70, 0.95), rgba(15, 22, 40, 0.95));
  border: 2px solid rgba(247, 178, 103, 0.3);
}

.flashcard__back {
  background: linear-gradient(160deg, rgba(123, 223, 242, 0.15), rgba(19, 26, 46, 0.95));
  border: 2px solid rgba(123, 223, 242, 0.3);
  transform: rotateY(180deg);
}

.flashcard__hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}

/* Sequência - Drag and drop */
.sequence-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.sequence-item {
  padding: 14px 18px;
  background: rgba(16, 21, 36, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: grab;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sequence-item:hover {
  border-color: var(--accent);
  background: rgba(247, 178, 103, 0.1);
}

.sequence-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.sequence-item .order-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #1b1b1b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.choices {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.choice-btn {
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(12, 16, 28, 0.9);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s ease;
}

.choice-btn:hover {
  border-color: var(--accent);
  background: rgba(247, 178, 103, 0.1);
}

.choice-btn.correct {
  border-color: var(--success);
  background: rgba(74, 222, 128, 0.15);
}

.choice-btn.wrong {
  border-color: var(--accent-3);
  background: rgba(255, 107, 107, 0.15);
}

.choice-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.playground__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.playground__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.side-card {
  padding: 18px;
}

.side-card h4 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.score {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  margin: 8px 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.score:last-child {
  border-bottom: none;
}

.score strong {
  color: var(--text);
  font-size: 18px;
}

.reference-log {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.reference-log div {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

/* Resultado final */
.result-box {
  text-align: center;
  padding: 40px 20px;
}

.result-box h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.result-box .score-big {
  font-size: 64px;
  font-weight: 700;
  color: var(--accent);
  margin: 20px 0;
}

.result-box .score-label {
  color: var(--muted);
  font-size: 16px;
}

/* Progress cards */
.progress-card {
  text-align: center;
  padding: 24px;
}

.progress-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--muted);
}

.progress-card p {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}

.chat {
  background: rgba(16, 21, 36, 0.6);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chat__log {
  max-height: 400px;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  padding: 10px;
  margin-bottom: 16px;
}

.chat__bubble {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.5;
  max-width: 85%;
}

.chat__bubble.user {
  background: rgba(247, 178, 103, 0.15);
  border-color: rgba(247, 178, 103, 0.3);
  margin-left: auto;
}

.chat__bubble.assistant {
  background: rgba(123, 223, 242, 0.12);
  border-color: rgba(123, 223, 242, 0.3);
}

.chat__text {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat__text p {
  margin: 0 0 12px 0;
}

.chat__text p:last-child {
  margin-bottom: 0;
}

.chat__copy-btn {
  display: block;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.chat__copy-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.chat__copy-btn.copied {
  background: var(--success, #10B981);
  border-color: var(--success, #10B981);
  color: #fff;
}

.chat__input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}

.chat__input textarea {
  min-height: 60px;
  resize: vertical;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 10, 18, 0.85);
  color: var(--text);
  font-size: 14px;
}

.footer {
  text-align: center;
  color: var(--muted);
  padding: 30px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Instruções do modo */
.mode-instructions {
  background: rgba(123, 223, 242, 0.1);
  border: 1px solid rgba(123, 223, 242, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--accent-2);
}

/* Loading */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--muted);
}

.loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Ad container */
.ad-container {
  background: rgba(16, 21, 36, 0.4);
  border-radius: 12px;
  padding: 10px;
}

/* Como usar */
.how-to-use {
  background: linear-gradient(160deg, rgba(123, 223, 242, 0.08), rgba(19, 26, 46, 0.95));
  border: 1px solid rgba(123, 223, 242, 0.2);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.how-to-use h3 {
  margin: 0 0 20px;
  color: var(--accent-2);
  font-size: 18px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.step-number {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), #ffd36e);
  color: #1b1b1b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.step strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.step p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .playground { grid-template-columns: 1fr; }
  .menu { position: static; }
  .mode-grid { grid-template-columns: 1fr; }
  .hero { padding: 32px 5vw 20px; }
  .container { padding: 20px 5vw 40px; }
}

/* ===== ANIMACOES VIBRANTES ===== */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary); }
  50% { box-shadow: 0 0 20px var(--primary), 0 0 30px var(--pink); }
}

@keyframes confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-bounce {
  animation: bounce 0.5s ease;
}

.animate-shake {
  animation: shake 0.4s ease;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-slideUp {
  animation: slideUp 0.4s ease-out;
}

/* Confetti container */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confetti 1s ease-out forwards;
}

/* Badge styles */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge--primary {
  background: var(--gradient-primary);
  color: #fff;
}

.badge--secondary {
  background: var(--gradient-secondary);
  color: #fff;
}

.badge--accent {
  background: var(--gradient-accent);
  color: #fff;
}

/* Progress card vibrante */
.progress-card p {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow effects */
.glow-primary {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.glow-success {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.glow-pink {
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}

/* Step number vibrante */
.step-number {
  background: var(--gradient-primary);
}

/* Hero title gradient */
.hero h1 {
  background: linear-gradient(135deg, #fff 0%, var(--primary) 50%, var(--pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Flashcard vibrante */
.flashcard__front {
  background: linear-gradient(160deg, rgba(30, 22, 64, 0.95), rgba(21, 13, 48, 0.95));
  border: 2px solid rgba(139, 92, 246, 0.4);
}

.flashcard__back {
  background: linear-gradient(160deg, rgba(6, 182, 212, 0.2), rgba(21, 13, 48, 0.95));
  border: 2px solid rgba(6, 182, 212, 0.4);
}

/* Choice button vibrante */
.choice-btn:hover {
  border-color: var(--primary);
  background: rgba(139, 92, 246, 0.15);
}

.choice-btn.correct {
  border-color: var(--success);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.1));
  animation: bounce 0.5s ease;
}

.choice-btn.wrong {
  border-color: var(--accent-3);
  background: rgba(239, 68, 68, 0.15);
  animation: shake 0.4s ease;
}

/* Timer vibrante */
.timer {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Result box vibrante */
.result-box .score-big {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Chat bubbles vibrantes */
.chat__bubble.user {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.15));
  border-color: rgba(139, 92, 246, 0.4);
}

.chat__bubble.assistant {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(16, 185, 129, 0.1));
  border-color: rgba(6, 182, 212, 0.3);
}

/* ===== DEVOCIONAL DIARIO ===== */
.devocional-hero {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1));
  border-radius: var(--radius);
  border: 1px solid rgba(139, 92, 246, 0.2);
  margin-bottom: 24px;
}

.devocional-hero .verse-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.verse-display {
  font-size: 24px;
  line-height: 1.6;
  color: var(--text);
  font-style: italic;
  margin: 20px 0;
}

.verse-reference {
  color: var(--primary);
  font-weight: 600;
  font-size: 16px;
}

.reflexao-card {
  background: linear-gradient(160deg, rgba(30, 22, 64, 0.95), rgba(21, 13, 48, 0.95));
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid rgba(6, 182, 212, 0.2);
  margin-bottom: 20px;
}

.reflexao-card h4 {
  color: var(--secondary);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.oracao-card {
  background: linear-gradient(160deg, rgba(236, 72, 153, 0.1), rgba(30, 22, 64, 0.95));
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid rgba(236, 72, 153, 0.2);
}

.oracao-card h4 {
  color: var(--pink);
  margin: 0 0 12px;
}

.devocional-history {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 24px;
}

.history-day {
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-day.completed {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

.history-day:hover {
  transform: scale(1.1);
}

/* ===== JORNADA PELOS LIVROS ===== */
.testament-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  justify-content: center;
}

.testament-tab {
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.testament-tab.active {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.book-card {
  background: linear-gradient(160deg, rgba(30, 22, 64, 0.95), rgba(21, 13, 48, 0.95));
  border-radius: var(--radius);
  padding: 16px;
  border: 2px solid rgba(139, 92, 246, 0.15);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.book-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
}

.book-card .book-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.book-card h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text);
}

.book-card .book-chapters {
  font-size: 11px;
  color: var(--muted);
}

.book-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}

.book-progress-bar .fill {
  height: 100%;
  background: var(--gradient-secondary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.book-card.completed {
  border-color: var(--success);
}

.book-card.completed::after {
  content: '\\2713';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}

.jornada-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.jornada-stat {
  background: linear-gradient(160deg, rgba(30, 22, 64, 0.95), rgba(21, 13, 48, 0.95));
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.jornada-stat .stat-value {
  font-size: 32px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.jornada-stat .stat-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== BATALHA DE CONHECIMENTO ===== */
.battle-arena {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.1), rgba(30, 22, 64, 0.95));
  border-radius: var(--radius);
  padding: 30px;
  border: 2px solid rgba(239, 68, 68, 0.3);
  text-align: center;
}

.battle-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 30px;
}

.battle-player {
  text-align: center;
}

.battle-player .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 10px;
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.battle-player.ai .avatar {
  background: var(--gradient-accent);
}

.battle-player .name {
  font-weight: 600;
  color: var(--text);
}

.battle-player .score {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.vs-badge {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(245, 158, 11, 0.2);
  padding: 10px 20px;
  border-radius: 12px;
}

.battle-question {
  font-size: 22px;
  margin: 30px 0;
  color: var(--text);
}

.battle-timer {
  font-size: 48px;
  font-weight: 700;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}

.battle-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.battle-result {
  padding: 40px;
  text-align: center;
}

.battle-result h3 {
  font-size: 32px;
  margin-bottom: 20px;
}

.battle-result.victory h3 {
  color: var(--success);
}

.battle-result.defeat h3 {
  color: var(--accent-3);
}

.battle-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}

/* ===== ESTUDO DE PERSONAGENS ===== */
.character-card {
  background: linear-gradient(160deg, rgba(30, 22, 64, 0.95), rgba(21, 13, 48, 0.95));
  border-radius: var(--radius);
  padding: 24px;
  border: 2px solid rgba(139, 92, 246, 0.2);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.character-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
}

.character-info h3 {
  margin: 0 0 8px;
  color: var(--text);
}

.character-info .character-title {
  color: var(--primary);
  font-size: 14px;
  margin-bottom: 12px;
}

.character-info p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.character-verses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.character-verses span {
  background: rgba(139, 92, 246, 0.2);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--primary);
}

/* ===== MENSAGENS MOTIVACIONAIS - Pastor Claudio Duarte ===== */
.mensagens-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  min-height: 500px;
}

@media (max-width: 900px) {
  .mensagens-container {
    grid-template-columns: 1fr;
  }
}

.mensagens-sidebar {
  background: linear-gradient(160deg, rgba(30, 22, 64, 0.95), rgba(21, 13, 48, 0.95));
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  height: fit-content;
  position: sticky;
  top: 100px;
}

.mensagens-sidebar h4 {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 14px;
}

.search-filter {
  margin-bottom: 16px;
}

.search-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 10, 18, 0.85);
  color: var(--text);
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.themes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 5px;
}

.theme-tag-btn {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  text-align: left;
  transition: all 0.2s ease;
}

.theme-tag-btn:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--primary);
  color: var(--text);
}

.theme-tag-btn.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

.mensagens-content {
  background: linear-gradient(160deg, rgba(30, 22, 64, 0.95), rgba(21, 13, 48, 0.95));
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.mensagens-log {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 600px;
  overflow-y: auto;
}

.mensagem-card {
  background: linear-gradient(160deg, rgba(236, 72, 153, 0.08), rgba(139, 92, 246, 0.1));
  border-radius: var(--radius);
  padding: 20px;
  border-left: 4px solid var(--primary);
  animation: slideUp 0.3s ease-out;
}

.mensagem-card p {
  margin: 0 0 16px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}

.mensagem-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.action-btn.copied {
  background: var(--success, #10B981);
  border-color: var(--success, #10B981);
  color: #fff;
}

.mensagem-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 16px;
}

.mensagem-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(139, 92, 246, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.mensagem-loading p {
  color: var(--muted);
  font-size: 14px;
}

/* ===== STATUS PARA INSTAGRAM ===== */
.status-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .status-container {
    grid-template-columns: 1fr;
  }
}

.status-sidebar {
  background: linear-gradient(160deg, rgba(30, 22, 64, 0.95), rgba(21, 13, 48, 0.95));
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  position: sticky;
  top: 100px;
}

.status-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.status-tab {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.status-tab:hover {
  background: rgba(139, 92, 246, 0.15);
  color: var(--text);
}

.status-tab.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.status-tab-content h4 {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-themes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.status-theme-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: all 0.2s ease;
}

.status-theme-btn:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--primary);
  color: var(--text);
}

.status-theme-btn.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

.status-bg-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.status-bg-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.status-bg-btn:hover {
  transform: scale(1.1);
}

.status-bg-btn.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--primary);
  transform: scale(1.1);
}

.status-custom-input {
  width: 100%;
  min-height: 140px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 10, 18, 0.85);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}

.status-custom-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Preview do Status - 360px = 1080px com scale:3 (Instagram Story) */
.status-preview-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.status-preview-wrapper {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.status-preview {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  transition: background 0.4s ease;
}

/* Fundos do status */
.status-preview[data-bg="purple"] {
  background: linear-gradient(160deg, #4c1d95 0%, #7c3aed 50%, #ec4899 100%);
}
.status-preview[data-bg="gold"] {
  background: linear-gradient(160deg, #78350f 0%, #d97706 50%, #fbbf24 100%);
}
.status-preview[data-bg="teal"] {
  background: linear-gradient(160deg, #134e4a 0%, #0d9488 50%, #06b6d4 100%);
}
.status-preview[data-bg="rose"] {
  background: linear-gradient(160deg, #881337 0%, #e11d48 50%, #f97316 100%);
}
.status-preview[data-bg="blue"] {
  background: linear-gradient(160deg, #1e3a8a 0%, #2563eb 50%, #7c3aed 100%);
}
.status-preview[data-bg="night"] {
  background: linear-gradient(160deg, #0f0a1f 0%, #1e1b4b 50%, #312e81 100%);
}

/* Overlay no preview */
.status-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}

.status-preview__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 20px;
  box-sizing: border-box;
}

.status-preview__icon {
  font-size: 32px;
  margin-bottom: 18px;
  opacity: 0.9;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.status-preview__text {
  font-size: clamp(14px, 3.5vw, 18px);
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  white-space: pre-line;
  word-break: break-word;
}

.status-preview__url {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 16px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* Acoes do status */
.status-actions {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

/* Loading overlay do preview */
.status-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.status-loading-overlay .spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================================
   SOCIAL CREATOR — Estilos (prefixados com .sc-app para
   evitar conflito com o Agora Biblica)
   ============================================================ */

/* ── OVERLAY ── */
#sc-overlay.sc-app {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0d0d14;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Botão fechar overlay */
.sc-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(13,13,20,0.9);
  color: #f0f0f8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Inter', sans-serif;
}
.sc-close-btn:hover {
  background: rgba(239,68,68,.8);
  border-color: rgba(239,68,68,.8);
}

/* ── TELAS ── */
.sc-app .screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 1;
  background: #0d0d14;
  color: #f0f0f8;
  font-family: 'Inter', sans-serif;
}
.sc-app .screen.active {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
}

/* ── CSS VARS LOCAL ── */
.sc-app {
  --sc-bg:       #0d0d14;
  --sc-bg2:      #13131f;
  --sc-bg3:      #1a1a2e;
  --sc-border:   rgba(255,255,255,0.08);
  --sc-border2:  rgba(255,255,255,0.13);
  --sc-text:     #f0f0f8;
  --sc-muted:    #8b8ba7;
  --sc-accent:   #7c3aed;
  --sc-accent2:  #ec4899;
  --sc-radius:   12px;
  --sc-radius-lg:18px;
  --sc-shadow-lg:0 8px 48px rgba(0,0,0,0.6);
  --sc-topbar-h: 56px;
}

/* TELA 1 — SELEÇÃO DE FORMATO */
.sc-app .screen1-header {
  flex-shrink: 0;
  padding: 16px 20px;
  background: var(--sc-bg2);
  border-bottom: 1px solid var(--sc-border);
}
.sc-app .logo {
  display: flex; align-items: center; gap: 12px;
}
.sc-app .logo span { font-size: 26px; }
.sc-app .logo h1 { font-size: 18px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
.sc-app .logo p  { font-size: 11px; color: var(--sc-muted); margin: 0; }

.sc-app .screen1-body {
  flex: 1; overflow-y: auto;
  padding: 24px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--sc-border2) transparent;
}
.sc-app .screen1-title { margin-bottom: 20px; }
.sc-app .screen1-title h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.sc-app .screen1-title p  { font-size: 13px; color: var(--sc-muted); margin: 0; }

.sc-app .format-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.sc-app .format-card {
  background: var(--sc-bg2);
  border: 2px solid var(--sc-border2);
  border-radius: var(--sc-radius-lg);
  padding: 16px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center;
  color: var(--sc-text);
  transition: all .2s; position: relative;
  overflow: hidden;
}
.sc-app .format-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--sc-accent), var(--sc-accent2));
  opacity: 0; transition: opacity .2s;
}
.sc-app .format-card:hover { border-color: var(--sc-accent); transform: translateY(-2px); }
.sc-app .format-card:hover::before { opacity: 0.06; }
.sc-app .format-card:active { transform: scale(0.97); }
.sc-app .format-card > * { position: relative; z-index: 1; }

.sc-app .format-preview {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sc-accent), var(--sc-accent2));
  border-radius: 8px; opacity: .85;
  flex-shrink: 0;
}
.sc-app .shape-notch {
  width: 30%; height: 6px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
}
.sc-app .story-shape    { width: 38px; height: 64px; }
.sc-app .square-shape   { width: 56px; height: 56px; }
.sc-app .portrait-shape { width: 44px; height: 56px; }
.sc-app .landscape-shape{ width: 72px; height: 40px; }
.sc-app .twitter-shape  { width: 72px; height: 40px; background: linear-gradient(135deg, #1d9bf0, #0f4c75); }
.sc-app .pinterest-shape{ width: 38px; height: 56px; background: linear-gradient(135deg, #e60023, #ad081b); }

.sc-app .format-meta { display: flex; flex-direction: column; gap: 3px; }
.sc-app .network-badge { font-size: 10px; color: var(--sc-muted); font-weight: 500; }
.sc-app .format-meta strong { font-size: 13px; font-weight: 700; }
.sc-app .dim { font-size: 10px; color: var(--sc-muted); font-family: monospace; }

.sc-app .format-arrow {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 16px; color: var(--sc-muted); opacity: 0;
  transition: opacity .2s, right .2s;
}
.sc-app .format-card:hover .format-arrow { opacity: 1; right: 12px; }

.sc-app .screen1-footer {
  flex-shrink: 0;
  background: var(--sc-bg2);
  border-top: 1px solid var(--sc-border);
  padding: 12px 20px;
}

/* TELA 2 — EDITOR */
.sc-app #screenEditor {
  background: var(--sc-bg);
  overflow: hidden;
}

.sc-app .editor-topbar {
  flex-shrink: 0;
  height: var(--sc-topbar-h);
  display: flex; align-items: center;
  gap: 10px; padding: 0 12px;
  background: var(--sc-bg2);
  border-bottom: 1px solid var(--sc-border);
  z-index: 10;
}
.sc-app .topbar-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sc-bg3); border: 1px solid var(--sc-border2);
  border-radius: 10px; cursor: pointer; color: var(--sc-text);
  transition: all .15s; flex-shrink: 0;
}
.sc-app .topbar-btn:hover:not(:disabled) { border-color: var(--sc-accent); color: var(--sc-accent); }
.sc-app .topbar-btn:disabled { opacity: .4; cursor: not-allowed; }

.sc-app .format-pill {
  flex: 1; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--sc-muted);
  background: var(--sc-bg3); border: 1px solid var(--sc-border);
  padding: 6px 12px; border-radius: 20px;
}
.sc-app .topbar-actions { display: flex; gap: 6px; }

.sc-app .editor-canvas-area {
  flex: 0 0 auto;
  height: clamp(110px, calc(100vh - 56px - 280px), 240px);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  position: relative;
  overflow: hidden;
  background-color: var(--sc-bg);
  background-image:
    linear-gradient(45deg, #16162a 25%, transparent 25%),
    linear-gradient(-45deg, #16162a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #16162a 75%),
    linear-gradient(-45deg, transparent 75%, #16162a 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.sc-app .canvas-wrap {
  display: flex; align-items: center; justify-content: center;
  max-width: 100%; max-height: 100%;
}

.sc-app .preview-canvas {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sc-shadow-lg), 0 0 0 1px rgba(255,255,255,0.07);
  transition: all .3s;
  aspect-ratio: 9 / 16;
  height: clamp(80px, calc(100% - 24px), 520px);
  width: auto;
  max-width: calc(100vw - 24px);
}
.sc-app .preview-canvas[data-format="square"]    { aspect-ratio: 1/1;   height: clamp(80px, calc(100% - 24px), 460px); }
.sc-app .preview-canvas[data-format="portrait"]  { aspect-ratio: 4/5;   height: clamp(80px, calc(100% - 24px), 480px); }
.sc-app .preview-canvas[data-format="landscape"],
.sc-app .preview-canvas[data-format="twitter"]  { aspect-ratio: 16/9;  height: clamp(80px, calc(100% - 24px), 340px); }
.sc-app .preview-canvas[data-format="pinterest"]{ aspect-ratio: 2/3;   height: clamp(80px, calc(100% - 24px), 480px); }

.sc-app .canvas-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 28px 24px; gap: 14px; position: relative;
}
.sc-app .canvas-icon { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.sc-app .canvas-icon.hidden { display: none; }
.sc-app .canvas-text {
  text-align: center; font-weight: 600; line-height: 1.55;
  word-break: break-word;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  flex: 1; display: flex; align-items: center; justify-content: center;
  max-width: 100%;
}
.sc-app .canvas-footer {
  font-size: 11px; opacity: 0.6; font-weight: 500;
  letter-spacing: .05em; text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  position: absolute; bottom: 14px;
}
.sc-app .canvas-footer:empty { display: none; }

/* Backgrounds do canvas */
/* ── 1. GRADIENTES (30) ── */
.sc-app [data-bg="purple-pink"]     { background: linear-gradient(135deg,#4c1d95,#7c3aed,#ec4899); }
.sc-app [data-bg="gold-amber"]      { background: linear-gradient(135deg,#78350f,#d97706,#fbbf24); }
.sc-app [data-bg="teal-cyan"]       { background: linear-gradient(135deg,#134e4a,#0d9488,#06b6d4); }
.sc-app [data-bg="rose-orange"]     { background: linear-gradient(135deg,#881337,#e11d48,#f97316); }
.sc-app [data-bg="blue-indigo"]     { background: linear-gradient(135deg,#1e3a8a,#2563eb,#7c3aed); }
.sc-app [data-bg="green-emerald"]   { background: linear-gradient(135deg,#064e3b,#059669,#34d399); }
.sc-app [data-bg="sunset"]          { background: linear-gradient(135deg,#f97316,#ef4444,#dc2626); }
.sc-app [data-bg="ocean"]           { background: linear-gradient(160deg,#0ea5e9,#2563eb,#1e3a8a); }
.sc-app [data-bg="aurora"]          { background: linear-gradient(135deg,#6d28d9,#ec4899,#f59e0b); }
.sc-app [data-bg="forest"]          { background: linear-gradient(135deg,#14532d,#166534,#4ade80); }
.sc-app [data-bg="lavender"]        { background: linear-gradient(135deg,#4c1d95,#a78bfa,#c4b5fd); }
.sc-app [data-bg="coral"]           { background: linear-gradient(135deg,#be185d,#f43f5e,#fb923c); }
.sc-app [data-bg="celestial-gold"]  { background: linear-gradient(135deg,#b45309,#f59e0b,#fef08a); }
.sc-app [data-bg="rose-gold"]       { background: linear-gradient(135deg,#9f1239,#fb7185,#fecdd3); }
.sc-app [data-bg="royal-majesty"]   { background: linear-gradient(135deg,#311042,#6b21a8,#c084fc); }
.sc-app [data-bg="holy-fire"]       { background: linear-gradient(135deg,#991b1b,#ea580c,#facc15); }
.sc-app [data-bg="peaceful-sky"]    { background: linear-gradient(135deg,#0284c7,#38bdf8,#bae6fd); }
.sc-app [data-bg="mint-breeze"]     { background: linear-gradient(135deg,#0f766e,#14b8a6,#99f6e4); }
.sc-app [data-bg="peach-sunrise"]   { background: linear-gradient(135deg,#c2410c,#fb923c,#fed7aa); }
.sc-app [data-bg="sapphire-glow"]   { background: linear-gradient(135deg,#172554,#1d4ed8,#60a5fa); }
.sc-app [data-bg="emerald-spring"]  { background: linear-gradient(135deg,#065f46,#10b981,#a7f3d0); }
.sc-app [data-bg="crimson-ruby"]    { background: linear-gradient(135deg,#831843,#be123c,#fb7185); }
.sc-app [data-bg="twilight-violet"] { background: linear-gradient(135deg,#431407,#9a3412,#ea580c); }
.sc-app [data-bg="berry-magenta"]   { background: linear-gradient(135deg,#701a75,#a21caf,#f472b6); }
.sc-app [data-bg="morning-dew"]     { background: linear-gradient(135deg,#0369a1,#06b6d4,#67e8f9); }
.sc-app [data-bg="warm-sand"]       { background: linear-gradient(135deg,#713f12,#ca8a04,#fde047); }
.sc-app [data-bg="plum-dusk"]       { background: linear-gradient(135deg,#4a044e,#86198f,#e879f9); }
.sc-app [data-bg="deep-caramel"]    { background: linear-gradient(135deg,#451a03,#92400e,#d97706); }
.sc-app [data-bg="pastel-dream"]    { background: linear-gradient(135deg,#818cf8,#c084fc,#f472b6); }
.sc-app [data-bg="cosmic-glow"]     { background: linear-gradient(135deg,#0f172a,#3b0764,#ec4899); }

/* ── 2. PASTÉIS & CLARAS (18) ── */
.sc-app [data-bg="white"]           { background: #ffffff; }
.sc-app [data-bg="cream"]           { background: #fef9ef; }
.sc-app [data-bg="light-blue"]      { background: #dbeafe; }
.sc-app [data-bg="light-green"]     { background: #dcfce7; }
.sc-app [data-bg="light-purple"]    { background: #ede9fe; }
.sc-app [data-bg="light-pink"]      { background: #fce7f3; }
.sc-app [data-bg="light-gold"]      { background: #fef3c7; }
.sc-app [data-bg="light-teal"]      { background: #ccfbf1; }
.sc-app [data-bg="light-peach"]     { background: #ffedd5; }
.sc-app [data-bg="light-rose"]      { background: #ffe4e6; }
.sc-app [data-bg="light-lavender"]  { background: #f3e8ff; }
.sc-app [data-bg="light-yellow"]    { background: #fef9c3; }
.sc-app [data-bg="light-mint"]      { background: #e6fffa; }
.sc-app [data-bg="light-gray"]      { background: #f3f4f6; }
.sc-app [data-bg="parchment"]       { background: #fbf0d9; }
.sc-app [data-bg="sand"]            { background: #f5efe6; }
.sc-app [data-bg="sage"]            { background: #e2e8e0; }
.sc-app [data-bg="linen"]           { background: #f7f3ee; }

/* ── 3. CORES VIVAS / SÓLIDAS (18) ── */
.sc-app [data-bg="vibrant-coral"]      { background: #f43f5e; }
.sc-app [data-bg="vibrant-ruby"]       { background: #e11d48; }
.sc-app [data-bg="vibrant-amber"]      { background: #f59e0b; }
.sc-app [data-bg="vibrant-gold"]       { background: #d97706; }
.sc-app [data-bg="vibrant-emerald"]    { background: #059669; }
.sc-app [data-bg="vibrant-teal"]       { background: #0d9488; }
.sc-app [data-bg="vibrant-cyan"]       { background: #0284c7; }
.sc-app [data-bg="vibrant-blue"]       { background: #2563eb; }
.sc-app [data-bg="vibrant-indigo"]     { background: #4f46e5; }
.sc-app [data-bg="vibrant-purple"]     { background: #7c3aed; }
.sc-app [data-bg="vibrant-magenta"]    { background: #c026d3; }
.sc-app [data-bg="vibrant-rose"]       { background: #db2777; }
.sc-app [data-bg="vibrant-terracotta"] { background: #c2410c; }
.sc-app [data-bg="vibrant-rust"]       { background: #b45309; }
.sc-app [data-bg="vibrant-olive"]      { background: #4d7c0f; }
.sc-app [data-bg="vibrant-forest"]     { background: #15803d; }
.sc-app [data-bg="vibrant-plum"]       { background: #86198f; }
.sc-app [data-bg="vibrant-chocolate"]  { background: #78350f; }

/* ── 4. ESCURAS & PROFUNDAS (18) ── */
.sc-app [data-bg="night"]           { background: linear-gradient(135deg,#0f0a1f,#1e1b4b,#312e81); }
.sc-app [data-bg="dark-green"]      { background: linear-gradient(135deg,#052e16,#14532d,#166534); }
.sc-app [data-bg="dark-red"]        { background: linear-gradient(135deg,#3b0000,#7f1d1d,#991b1b); }
.sc-app [data-bg="onyx"]            { background: linear-gradient(135deg,#0a0a0a,#1c1c1c,#2d2d2d); }
.sc-app [data-bg="dark-blue"]       { background: linear-gradient(135deg,#0c1445,#1e2d6d,#1e3a8a); }
.sc-app [data-bg="dark-purple"]     { background: linear-gradient(135deg,#1a0533,#3b0764,#4c1d95); }
.sc-app [data-bg="deep-navy"]       { background: linear-gradient(135deg,#020b1e,#07193b,#0f2b5c); }
.sc-app [data-bg="dark-chocolate"]  { background: linear-gradient(135deg,#1c0f0a,#381a0e,#572914); }
.sc-app [data-bg="dark-slate"]      { background: linear-gradient(135deg,#0f172a,#1e293b,#334155); }
.sc-app [data-bg="dark-wine"]       { background: linear-gradient(135deg,#2b0914,#4a0e22,#701a37); }
.sc-app [data-bg="dark-teal"]       { background: linear-gradient(135deg,#041f1e,#093836,#115e59); }
.sc-app [data-bg="dark-amber"]      { background: linear-gradient(135deg,#1f1300,#3d2600,#78350f); }
.sc-app [data-bg="dark-charcoal"]   { background: linear-gradient(135deg,#111111,#1e1e1e,#2d2d2d); }
.sc-app [data-bg="dark-violet"]     { background: linear-gradient(135deg,#1b0a2a,#32124d,#4c1d95); }
.sc-app [data-bg="dark-copper"]     { background: linear-gradient(135deg,#23120b,#431f10,#6e3319); }
.sc-app [data-bg="dark-emerald"]    { background: linear-gradient(135deg,#022013,#063d27,#065f46); }
.sc-app [data-bg="dark-plum"]       { background: linear-gradient(135deg,#230419,#3f092e,#5b1444); }
.sc-app [data-bg="pure-black"]      { background: #000000; }

/* FERRAMENTAS */
.sc-app .editor-tools {
  flex: 1;
  min-height: 0;
  background: var(--sc-bg2);
  border-top: 1px solid var(--sc-border);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.sc-app .tool-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg2);
  flex-shrink: 0;
}

.sc-app .tool-tab {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 12px 8px;
  background: none; border: none; cursor: pointer;
  color: var(--sc-muted); transition: all .15s;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.sc-app .tool-tab.active { color: var(--sc-accent); border-bottom-color: var(--sc-accent); }
.sc-app .tool-tab:hover:not(.active) { color: var(--sc-text); }
.sc-app .tt-icon  { font-size: 24px; line-height: 1; }
.sc-app .tt-label { font-size: 11px; font-weight: 600; white-space: nowrap; }

.sc-app .tool-panels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sc-border2) transparent;
}

.sc-app .tool-panel {
  display: none;
  padding: 14px 16px;
  flex-direction: column; gap: 10px;
}
.sc-app .tool-panel.active { display: flex; }

.sc-app .themes-scroll {
  display: flex; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.sc-app .themes-scroll::-webkit-scrollbar { display: none; }

.sc-app .theme-chip {
  flex-shrink: 0;
  background: var(--sc-bg3); border: 1px solid var(--sc-border2);
  border-radius: 20px; padding: 6px 12px;
  color: var(--sc-muted); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  font-family: inherit;
}
.sc-app .theme-chip.active {
  background: rgba(124,58,237,.2); border-color: var(--sc-accent);
  color: #a78bfa; font-weight: 600;
}

.sc-app .generate-row { display: flex; gap: 8px; }

.sc-app .text-input, .sc-app .textarea-input {
  width: 100%;
  background: var(--sc-bg3); border: 1px solid var(--sc-border2);
  border-radius: 8px; color: var(--sc-text);
  font-size: 13px; font-family: inherit;
  padding: 9px 12px; outline: none;
  transition: border .15s; resize: none;
}
.sc-app .text-input:focus, .sc-app .textarea-input:focus {
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.sc-app .textarea-input { height: 90px; line-height: 1.5; resize: vertical; }

.sc-app .panel-row { display: flex; align-items: center; justify-content: space-between; }
.sc-app .char-counter { font-size: 11px; color: var(--sc-muted); }

.sc-app .tabs-small {
  display: flex; gap: 4px;
  background: var(--sc-bg3); border-radius: 6px; padding: 3px;
}
.sc-app .tab-small {
  flex: 1; padding: 5px; border-radius: 4px;
  background: none; border: none; color: var(--sc-muted);
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.sc-app .tab-small.active { background: var(--sc-bg); color: var(--sc-text); }

.sc-app .bg-tab-content { display: none; padding-top: 10px; }
.sc-app .bg-tab-content.active { display: block; }

.sc-app .bg-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sc-app .bg-swatch {
  width: 100%; aspect-ratio: 1; border-radius: 8px;
  cursor: pointer; border: 2px solid transparent;
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sc-app .bg-swatch:hover   { transform: scale(1.08); z-index: 2; }
.sc-app .bg-swatch.active  { border-color: #fff; box-shadow: 0 0 0 2px var(--sc-accent); transform: scale(1.1); z-index: 3; }
.sc-app .bg-swatch.light-border { border: 1.5px solid rgba(0,0,0,0.12); }

/* Custom Background Picker */
.sc-app .custom-bg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--sc-bg3);
  border: 1px solid var(--sc-border2);
  border-radius: 8px;
}
.sc-app .custom-bg-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-app .custom-bg-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-app .custom-color-input {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--sc-border2);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  outline: none;
}
.sc-app .custom-color-input:hover {
  border-color: var(--sc-accent);
}
.sc-app .custom-hex-input {
  width: 80px;
  padding: 6px 8px;
  background: var(--sc-bg2);
  border: 1px solid var(--sc-border2);
  border-radius: 6px;
  color: var(--sc-text);
  font-size: 12px;
  font-family: monospace;
  text-transform: uppercase;
  outline: none;
}
.sc-app .custom-hex-input:focus {
  border-color: var(--sc-accent);
}
.sc-app .btn-custom-bg {
  padding: 6px 12px;
  background: var(--sc-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.sc-app .btn-custom-bg:hover {
  opacity: 0.9;
}

.sc-app .panel-field { display: flex; flex-direction: column; gap: 6px; }
.sc-app .panel-field label, .sc-app .field-label {
  font-size: 11px; font-weight: 700; color: var(--sc-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.sc-app .font-select { display: flex; gap: 6px; }
.sc-app .font-btn {
  flex: 1; padding: 8px; border-radius: 8px;
  background: var(--sc-bg3); border: 1px solid var(--sc-border2);
  color: var(--sc-muted); font-size: 12px; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.sc-app .font-btn.active { background: rgba(124,58,237,.2); border-color: var(--sc-accent); color: var(--sc-text); }

.sc-app .color-options { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-app .color-dot {
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: all .15s;
}
.sc-app .color-dot.active { border-color: #fff; box-shadow: 0 0 0 2px var(--sc-accent); transform: scale(1.15); }

.sc-app .range-input {
  width: 100%; -webkit-appearance: none;
  height: 4px; border-radius: 2px;
  background: var(--sc-border2); cursor: pointer;
}
.sc-app .range-input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--sc-accent); cursor: pointer;
  box-shadow: 0 0 0 3px rgba(124,58,237,.3);
}

.sc-app .align-group { display: flex; gap: 6px; }
.sc-app .align-btn {
  flex: 1; padding: 7px; border-radius: 6px;
  background: var(--sc-bg3); border: 1px solid var(--sc-border2);
  color: var(--sc-muted); font-size: 11px; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.sc-app .align-btn.active { background: rgba(124,58,237,.2); border-color: var(--sc-accent); color: var(--sc-text); }

.sc-app .icon-options { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; }
.sc-app .icon-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--sc-bg3); border: 1px solid var(--sc-border2);
  cursor: pointer; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.sc-app .icon-btn.active  { border-color: var(--sc-accent); background: rgba(124,58,237,.2); }
.sc-app .icon-btn:hover   { border-color: var(--sc-accent); }

.sc-app .hint-text { font-size: 11px; color: var(--sc-muted); line-height: 1.5; }

/* BOTÕES DO SOCIAL CREATOR */
.sc-app .btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--sc-radius);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; transition: all .2s;
  white-space: nowrap; outline: none;
}
.sc-app .btn:disabled { opacity: .4; cursor: not-allowed; }
.sc-app .btn-primary  {
  background: linear-gradient(135deg, var(--sc-accent), var(--sc-accent2));
  color: #fff; box-shadow: 0 2px 12px rgba(124,58,237,.4);
}
.sc-app .btn-primary:hover:not(:disabled) { box-shadow: 0 4px 20px rgba(124,58,237,.6); transform: translateY(-1px); }
.sc-app .btn-secondary {
  background: var(--sc-bg3); border: 1px solid var(--sc-border2); color: var(--sc-text);
}
.sc-app .btn-secondary:hover:not(:disabled) { border-color: var(--sc-accent); }
.sc-app .btn-ghost {
  background: transparent; border: 1px solid var(--sc-border2); color: var(--sc-muted);
}
.sc-app .btn-ghost:hover:not(:disabled) { color: var(--sc-text); background: var(--sc-bg3); }

.sc-app .action-bar {
  display: flex; gap: 8px;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--sc-bg2);
  border-top: 1px solid var(--sc-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sc-app .action-bar::-webkit-scrollbar { display: none; }
.sc-app .btn-action { flex-shrink: 0; }

/* LOADING */
.sc-app .loading-overlay {
  position: absolute; inset: 0;
  background: rgba(13,13,20,.88);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; z-index: 50;
}
.sc-app .loading-overlay.hidden { display: none; }
.sc-app .loading-overlay p { color: var(--sc-muted); font-size: 14px; }
.sc-app .loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--sc-border2); border-top-color: var(--sc-accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}

/* TOAST */
.sc-app .toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(16,185,129,.96); color: #fff;
  padding: 10px 22px; border-radius: 30px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  z-index: 10001; opacity: 0; pointer-events: none;
  transition: all .3s; white-space: nowrap;
}
.sc-app .toast.show  { opacity: 1; transform: translateX(-50%) translateY(0); }
.sc-app .toast.error { background: rgba(239,68,68,.96); }

/* DESKTOP (>=900px) */
@media (min-width: 900px) {
  .sc-app #screenEditor { flex-direction: column; }
  .sc-app .editor-canvas-area {
    position: absolute;
    top: var(--sc-topbar-h); left: 360px; right: 0;
    bottom: 0; padding: 24px;
    height: auto; flex: unset;
  }
  .sc-app .editor-tools {
    position: absolute;
    top: var(--sc-topbar-h); left: 0;
    width: 360px; bottom: 0;
    border-right: 1px solid var(--sc-border);
    border-top: none;
    overflow-y: auto;
    display: flex; flex-direction: column;
  }
  .sc-app .tool-panels { flex: 1; max-height: none; overflow-y: auto; }
  .sc-app .tool-tabs { grid-template-columns: repeat(3, 1fr); }
  .sc-app .action-bar { flex-wrap: wrap; overflow-x: visible; }
  .sc-app .btn-action { flex: 1; min-width: 100px; justify-content: center; }
  .sc-app .preview-canvas { height: clamp(280px, 68vh, 580px); }
  .sc-app .preview-canvas[data-format="square"]    { height: clamp(260px, 62vh, 520px); }
  .sc-app .preview-canvas[data-format="portrait"]  { height: clamp(270px, 64vh, 540px); }
  .sc-app .preview-canvas[data-format="landscape"],
  .sc-app .preview-canvas[data-format="twitter"]   { height: clamp(200px, 46vh, 390px); }
  .sc-app .preview-canvas[data-format="pinterest"] { height: clamp(270px, 64vh, 540px); }
  .sc-app .format-grid { grid-template-columns: repeat(3, 1fr); }
  .sc-app .screen1-body { max-width: 800px; margin: 0 auto; padding: 40px; }
}

/* MOBILE <=480px */
@media (max-width: 480px) {
  .sc-app .format-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-app .bg-grid     { grid-template-columns: repeat(6, 1fr); }
  .sc-app .tool-tab    { padding: 10px 6px; }
  .sc-app .tt-label    { font-size: 10px; }
  .sc-app .tt-icon     { font-size: 22px; }
  .sc-app .editor-canvas-area { height: clamp(100px, calc(100vh - 56px - 260px), 200px); }
}