body{
  background:
    radial-gradient(900px 360px at 50% -8%,#fffdf9 0%,rgba(255,253,249,0) 68%),
    linear-gradient(180deg,#faf7f1 0%,#edf1f4 100%);
}
.srs-wrap{ width:min(760px,calc(100% - 36px)); margin:0 auto; padding:38px 0 54px; }
.srs-heading{ text-align:center; margin-bottom:24px; }
.srs-heading h1{ color:var(--azul); font-size:2rem; margin:4px 0 6px; }
.srs-heading>p:not(.srs-eyebrow):not(.proof-clock){ color:var(--neutro); }
.srs-eyebrow{
  color:var(--verde-escuro); font-size:.76rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase;
}
.proof-clock{
  display:inline-block; margin-top:12px; padding:5px 11px; border-radius:999px;
  background:#f2ecdc; color:#77643c; font-size:.74rem; font-weight:800;
}
.srs-status{
  margin:0 0 18px; padding:12px 16px; border:1px solid var(--fio-ouro);
  border-radius:12px; background:rgba(255,253,249,.86); color:var(--azul-2); font-size:.88rem;
}
.srs-status[data-kind="success"]{ border-color:rgba(46,122,95,.32); color:var(--verde-escuro); }
.srs-status[data-kind="error"]{ border-color:rgba(170,65,48,.32); color:#8e3326; background:#fff8f6; }
.queue-summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 26px;
  background:var(--papel); border:1px solid var(--fio-ouro); border-radius:var(--raio-g);
  box-shadow:var(--sombra); margin-bottom:22px;
}
.queue-summary h2{ color:var(--azul); margin:4px 0; font-size:1.3rem; }
.queue-summary p:last-child{ color:var(--neutro); font-size:.88rem; }
.queue-summary button{ flex:0 0 auto; }
.review-stage{ margin-top:22px; }
.review-meta{ display:flex; justify-content:space-between; color:var(--neutro); font-size:.8rem; font-weight:800; }
.review-progress{ height:7px; margin:9px 0 16px; overflow:hidden; border-radius:999px; background:var(--trilho); }
.review-progress span{ display:block; width:0; height:100%; background:linear-gradient(90deg,var(--verde),var(--verde-2)); transition:width var(--transicao); }
.review-card{
  padding:30px; background:var(--papel); border:1px solid var(--fio-ouro);
  border-radius:var(--raio-g); box-shadow:var(--sombra-alta);
}
.review-face{ text-align:center; }
.card-label{ color:var(--verde-escuro); font-size:.73rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.card-context{ max-width:590px; margin:12px auto; color:var(--neutro); line-height:1.55; }
.card-phrase{ margin:18px 0; color:var(--azul); font-family:Georgia,'Times New Roman',serif; font-size:1.75rem; font-weight:700; line-height:1.35; }
.review-card audio{ max-width:420px; }
.reveal-button{ display:block; margin:24px auto 0; background:var(--azul); color:#fff; }
.review-back{ margin-top:24px; padding-top:24px; border-top:1px solid var(--fio-ouro); }
.card-translation{ color:var(--verde-escuro); font-size:1.18rem; font-weight:800; margin:10px 0; }
.card-clarity{ color:var(--neutro); line-height:1.55; font-style:italic; }
.rating-actions{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.rating-button{ min-height:54px; border:2px solid transparent; }
.rating-button.again{ background:#fff3f0; color:#963b2d; border-color:#e4b4aa; }
.rating-button.good{ background:#e8f5ee; color:var(--verde-escuro); border-color:#9bcbb7; }
.rating-button:disabled{ opacity:.55; cursor:wait; }
.empty-state{
  text-align:center; padding:34px 24px; background:var(--papel); border:1px solid var(--fio-ouro);
  border-radius:var(--raio-g); box-shadow:var(--sombra);
}
.empty-state>span{ display:grid; place-items:center; width:52px; height:52px; margin:0 auto 12px; border-radius:50%; background:#e3f1ea; color:var(--verde-escuro); font-size:1.4rem; font-weight:800; }
.empty-state h2{ color:var(--azul); }
.empty-state p{ margin:7px 0 20px; color:var(--neutro); }
.retry-button{ display:block; margin:18px auto 0; background:transparent; color:var(--azul); border:1px solid var(--azul); }
[hidden]{ display:none !important; }
@media(max-width:620px){
  .srs-wrap{ width:calc(100% - 28px); padding-top:28px; }
  .srs-heading h1{ font-size:1.65rem; }
  .queue-summary{ align-items:flex-start; flex-direction:column; padding:22px; }
  .queue-summary button{ width:100%; }
  .review-card{ padding:24px 18px; }
  .card-phrase{ font-size:1.45rem; }
}
@media(max-width:420px){
  header.topbar{ padding-inline:10px; }
  header.topbar .brand{ flex-basis:138px; max-width:138px; }
  header.topbar .topbar-acoes{ flex-shrink:0; gap:7px; }
  header.topbar a{ font-size:.72rem; }
  .rating-actions{ grid-template-columns:1fr; }
}