/* "O que escrever agora": só o que o app.css não tem */
.op-periodo { margin: 0 0 12px }
.op-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.op-item { display: flex; flex-direction: column; gap: 12px; animation: op-entra .32s ease both }
.op-item:nth-child(2) { animation-delay: .06s } .op-item:nth-child(3) { animation-delay: .12s }
@keyframes op-entra { from { opacity: 0; transform: translateY(6px) } }
.op-cab { display: flex; gap: 12px; align-items: flex-start }
.op-n { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--roxo-claro); color: var(--roxo); font-weight: 700 }
.op-tit { min-width: 0 } .op-tit h2 { overflow-wrap: anywhere; margin-bottom: 2px } .op-tit p { margin: 0 }
.op-regua { position: relative; height: 8px; border-radius: 99px; background: #EEECF5 }
.op-alvo { position: absolute; left: 0; top: 0; bottom: 0; width: 10.5%; border-radius: 99px; background: var(--verde-f); box-shadow: inset 0 0 0 1px var(--verde) }
.op-ponto { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--roxo); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(79,37,255,.35) }
.op-regua-r { display: flex; justify-content: space-between; margin-top: -6px }
.op-ganho { margin: 0 } .op-ganho b { color: var(--verde); font-size: 18px }
.op-item > .btn { align-self: flex-start }
.op-brief { border-top: 1px solid var(--linha); padding-top: 12px; display: grid; gap: 14px }
.op-brief[hidden] { display: none }
.op-brief h3 { font-size: 14px; margin: 0 0 6px } .op-brief h3:focus { outline: none }
.op-brief ul { margin: 0; padding-left: 18px } .op-brief li { margin: 3px 0 }
.op-brief > .btn { justify-self: start }
.op-site { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap }
.op-site select { font: inherit; border: 1px solid var(--linha); border-radius: 11px; padding: 9px 12px; background: #fff; color: var(--tinta); min-height: 42px; min-width: 0; max-width: 100% }
.op-site select:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-claro) }
#op-res { transition: opacity .2s ease } #op-res[aria-busy="true"] { opacity: .55 }
@media (prefers-reduced-motion: reduce) { .op-item { animation: none } #op-res { transition: none } }