.recording-history { margin-top: 24px; }
.recording-heading, .recording-event-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.recording-heading h2 { margin:8px 0; }
.recording-heading p, .recording-context { color:#746b60; margin:6px 0; }
.recording-scope { background:#faf4e8; border:1px solid #e4d4b8; border-radius:14px; padding:18px 20px; margin:20px 0; line-height:1.6; }
.recording-scope strong { color:#67512c; }
.recording-scope p { margin:6px 0 0; color:#635b50; }
.recording-count { color:#746b60; font-size:12px; line-height:1.6; }
.recording-error { border-left:3px solid #ae7642; background:#fff4e9; padding:14px 16px; line-height:1.6; }
.recording-empty { padding:22px 0; }
.recording-empty h3 { margin:0 0 10px; }
.recording-list { list-style:none; padding:0; margin:18px 0; }
.recording-event { padding:20px 0; border-top:1px solid #e7dfd1; }
.recording-state { border:1px solid #ded8ce; background:#f5f2ec; color:#4c4740; border-radius:8px; padding:6px 10px; font-size:13px; }
.recording-event time { color:#746b60; font-size:12px; padding-top:7px; }
.recording-context { font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.recording-gap { color:#865522; font-size:12px; line-height:1.6; }
.recording-reference { font-size:12px; margin-top:12px; color:#746b60; }
.recording-reference summary { cursor:pointer; width:fit-content; padding:5px 0; }
.recording-reference dl { display:grid; grid-template-columns:minmax(90px,130px) 1fr; gap:8px; padding:12px; background:#f8f6f1; border-radius:8px; }
.recording-reference dt { font-weight:600; }
.recording-reference dd { margin:0; overflow-wrap:anywhere; }
.recording-storage { margin:20px 0; padding:20px; border:1px solid #ded8ce; border-radius:14px; background:#fffdfa; }
.recording-storage h3 { margin:6px 0 8px; font-size:19px; }
.recording-storage .recording-heading p, .storage-explanation { font-size:13px; line-height:1.6; color:#635b50; }
.storage-status { display:table; border-radius:8px; padding:6px 10px; font-size:13px; font-weight:600; background:#f1eee7; color:#635b50; }
.storage-status-full { background:#fff0d5; color:#805316; }
.storage-status-available { background:#eaf2ec; color:#355b42; }
.storage-counts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:18px 0; }
.storage-counts dt { color:#746b60; font-size:12px; line-height:1.5; }
.storage-counts dd { margin:6px 0 0; color:#302a23; font-size:22px; font-weight:600; overflow-wrap:anywhere; }
@media (max-width:600px) {
  .recording-heading { display:block; }
  .recording-heading .btn { margin-top:16px; width:100%; }
  .recording-scope { padding:14px; font-size:13px; }
  .recording-event-top { gap:8px; }
  .recording-event time { width:100%; }
  .recording-storage { padding:14px; }
  .storage-counts { grid-template-columns:1fr; gap:14px; }
}