/* Variáveis de tema aplicadas ao palco via inline style em runtime */
:root {
  /* Paleta de destaques (tornada fácil de ajustar) */
  --hl-yellow: #ffd84f; /* amarelo vivo do print */
  --hl-green:  #8bc34a; /* verde */
  --hl-blue:   #64b5f6; /* azul céu */
  --hl-purple: #7c5bbf; /* roxo próximo à barra */
  --hl-pink:   #f06a92; /* rosa */
  --hl-orange: #fb8c00; /* laranja */
}

/* Ajustes gerais de tipografia e foco */
:focus-visible { outline: 2px solid #4c7dff; outline-offset: 2px; }
.btn:focus-visible { outline: 2px solid #4c7dff; outline-offset: 2px; }

/* Pré-visualização no Editor */
#preview { font-size: var(--fs, 48px); line-height: var(--lh, 1.6); color: var(--fg, #f5f5f5); background: var(--bg, #0c0c0c); padding: var(--margin, 64px); text-indent: var(--indent, 0px); }
#preview .paragraph { margin: 0 0 1em 0; }
#preview .break { color: #ffcc66; opacity: .9; font-size: .9em; }
#preview .time-label { color:#c084fc; opacity:.9; font-size:.9em; }

/* Destaques de alerta */
.warn { outline: 2px dashed #ff5959; }

/* HUD warnings for remaining time */
.time.warn-yellow { background:#fcd34d; border-color:#f59e0b; color:#111; }
.time.warn-red { background:#ef4444; border-color:#dc2626; }
.blink { animation: blinkPulse 1s steps(2, end) infinite; }
@keyframes blinkPulse { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }

/* Stage time labels */
.stage-content .time-label { color:#c084fc; opacity:.9; margin: 0 0 0.7em 0; }

/* Destaque e sublinhado (editor e palco) */
#preview mark.hl, .stage-content mark.hl { background:var(--hl-yellow); color:inherit; padding:0 .15em; border-radius:.15em; }
#preview .ul, .stage-content .ul { text-decoration: underline; text-underline-offset:.22em; text-decoration-thickness:.12em; }

/* Paleta de destaques (cores do print) */
#preview mark.hl.hl-yellow, .stage-content mark.hl.hl-yellow { background:var(--hl-yellow); color:#111; }
#preview mark.hl.hl-green,  .stage-content mark.hl.hl-green  { background:var(--hl-green); }
#preview mark.hl.hl-blue,   .stage-content mark.hl.hl-blue   { background:var(--hl-blue); }
#preview mark.hl.hl-purple, .stage-content mark.hl.hl-purple { background:var(--hl-purple); }
#preview mark.hl.hl-pink,   .stage-content mark.hl.hl-pink   { background:var(--hl-pink); }
#preview mark.hl.hl-orange, .stage-content mark.hl.hl-orange { background:var(--hl-orange); }

/* Chips de seleção de cor no Editor */
.hl-chip { width:18px; height:18px; border-radius:50%; border:2px solid #2a2a2a; cursor:pointer; display:inline-block; margin-left:6px; }
.hl-chip.y { background:var(--hl-yellow); }
.hl-chip.g { background:var(--hl-green); }
.hl-chip.b { background:var(--hl-blue); }
.hl-chip.p { background:var(--hl-purple); }
.hl-chip.r { background:var(--hl-pink); }
.hl-chip.o { background:var(--hl-orange); }

/* Botão de ajuste */
.btn.purple { background:#7a3a8c; border-color:#6a327a; }
.btn.toggle-on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }

/* Cursor de ajuste por arraste no palco */
#stageViewport.adjust { cursor: grab; }
#stageViewport.adjust.dragging { cursor: grabbing; }