.header-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.annotation-workspace { margin-top:8px; }
.annotation-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.annotation-heading .eyebrow { margin:0 0 6px; }
.annotation-heading .muted { margin:.35rem 0 0; }
.annotation-badge,.annotation-progress { display:inline-flex; min-height:34px; padding:5px 10px; align-items:center; justify-content:center; background:#10141d; color:var(--accent); border:1px solid var(--line); border-radius:999px; font-size:.82rem; font-weight:750; white-space:nowrap; }
.annotation-inline-status { margin:14px 0 0; }
.annotation-inline-status.success { color:var(--accent); }
.annotation-source-url { overflow-wrap:anywhere; }
.annotation-meta { display:grid; gap:6px; min-width:150px; font-size:.82rem; color:var(--muted); }
.annotation-meta span,.annotation-meta strong { display:block; }
.annotation-meta strong { color:var(--text); font-size:.9rem; }
.annotation-audio { width:100%; margin-top:20px; }
.annotation-timeline { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-top:22px; }
.annotation-support { display:grid; min-height:92px; padding:12px; grid-template-columns:auto 1fr; grid-template-areas:"order time" "order id"; gap:2px 9px; align-items:center; background:#10141d; color:var(--text); border:1px solid var(--line); text-align:left; }
.annotation-support:hover { border-color:var(--accent); }
.annotation-support.is-selected { background:color-mix(in srgb,var(--accent) 16%,#10141d); border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); }
.annotation-support-order { grid-area:order; display:grid; width:30px; height:30px; place-items:center; background:#222a37; border-radius:50%; color:var(--muted); font-size:.78rem; }
.annotation-support strong { grid-area:time; font-size:.9rem; }
.annotation-support small { grid-area:id; overflow:hidden; color:var(--muted); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.annotation-controls { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.annotation-role-picker { margin:0; padding:0; border:0; }
.annotation-role-picker legend { margin-bottom:10px; font-weight:700; }
.annotation-role-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.annotation-role.is-selected { background:color-mix(in srgb,var(--accent) 18%,#222a37); color:var(--text); border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); }
.annotation-spoken-row { display:flex; margin-top:18px; padding:14px 16px; align-items:center; justify-content:space-between; gap:18px; background:#10141d; border:1px solid var(--line); border-radius:12px; }
.annotation-spoken-row strong,.annotation-spoken-row small { display:block; }
.annotation-spoken-row small { margin-top:2px; color:var(--muted); }
.annotation-save-row { display:flex; margin-top:18px; align-items:center; justify-content:space-between; gap:18px; }
.annotation-save-row p { margin:0; }
@media (max-width:680px) {
  .page-header { align-items:flex-start; }
  .header-actions { flex-direction:column; align-items:stretch; }
  .header-actions .compact { margin-top:0; }
  .annotation-heading,.annotation-save-row { align-items:stretch; flex-direction:column; }
  .annotation-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .annotation-role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .annotation-save-row .primary-action { width:100%; }
}

.annotation-support-saved { grid-column:1 / -1; color:var(--accent); font-size:.72rem; font-weight:750; text-align:right; }