.jdx-st-faixa { display: flex; gap: 12px; padding: 10px 12px; overflow-x: auto; background: #11161d; border-bottom: 1px solid rgba(255,255,255,.05); }
.jdx-st-item { flex: 0 0 auto; width: 62px; background: none; border: 0; padding: 0; color: #8696a0; cursor: pointer; text-align: center; }
.jdx-st-item small { display: block; margin-top: 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jdx-st-anel { position: relative; display: inline-flex; padding: 2px; border-radius: 50%; border: 2px solid #3b4450; }
.jdx-st-anel.novo { border-color: #67B34D; }
.jdx-st-anel.vazio { border-color: transparent; }
.jdx-st-anel .jdx-avatar { width: 44px; height: 44px; border: 0; }
.jdx-st-mais { position: absolute; right: -4px; bottom: -2px; width: 18px; height: 18px; line-height: 15px; text-align: center; border-radius: 50%; background: #67B34D; color: #0d1117; font-size: 15px; border: 2px solid #11161d; box-sizing: content-box; }

.jdx-st-ov { position: absolute; inset: 0; z-index: 70; background: #0b0e14; display: flex; flex-direction: column; }
.jdx-st-barras { display: flex; gap: 4px; padding: 10px 12px 0; }
.jdx-st-barras i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.jdx-st-barras i.ok { background: #fff; }
.jdx-st-barras i.atual::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: jdxStBarra 6s linear forwards; }
@keyframes jdxStBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.jdx-st-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #e9edef; }
.jdx-st-topo > div { flex: 1; min-width: 0; }
.jdx-st-topo b, .jdx-st-topo small { display: block; }
.jdx-st-topo small { font-size: 12px; color: #8696a0; }
.jdx-st-x { background: none; border: 0; color: #e9edef; font-size: 18px; cursor: pointer; }

.jdx-st-corpo { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.jdx-st-corpo p { margin: 0; max-width: 520px; font-size: 24px; line-height: 1.35; text-align: center; color: #fff; white-space: pre-wrap; word-break: break-word; }
.jdx-st-corpo textarea { width: 100%; height: 100%; max-width: 520px; background: transparent; border: 0; outline: 0; resize: none; color: #fff; font-size: 24px; line-height: 1.35; text-align: center; }
.jdx-st-corpo textarea::placeholder { color: rgba(255,255,255,.55); }

.jdx-st-nav { position: absolute; top: 90px; bottom: 60px; width: 22%; background: none; border: 0; color: transparent; font-size: 36px; cursor: pointer; }
.jdx-st-nav.ant { left: 0; }
.jdx-st-nav.prox { right: 0; }
.jdx-st-nav:hover { color: rgba(255,255,255,.6); }

.jdx-st-cores { display: flex; gap: 10px; justify-content: center; padding: 12px; }
.jdx-st-cores button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.jdx-st-cores button.on { border-color: #fff; }

.jdx-st-rodape { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: #8696a0; font-size: 13px; }
.jdx-st-rodape button { background: #67B34D; color: #0d1117; border: 0; border-radius: 20px; padding: 8px 18px; cursor: pointer; }
.jdx-st-rodape button[data-a="del"] { background: #f85149; color: #fff; }