.recording-library, .shared-recording-page { --rec-surface: var(--card-bg, #fff); --rec-ink: var(--text-color, #21324a); --rec-muted: var(--text-secondary, #65758a); --rec-line: var(--border-color, #dde5f0); color: var(--rec-ink); margin: 0 auto; max-width: 1320px; min-width: 0; }
.recording-library__heading { align-items: center; background: transparent; box-shadow: none; display: flex; gap: 16px; height: auto; justify-content: space-between; margin-bottom: 24px; padding: 0; position: static; width: auto; z-index: auto; }
.recording-eyebrow { color: #3268da; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.recording-library h1, .shared-recording-page h1 { font-size: clamp(1.65rem, 3vw, 2.3rem); margin: 4px 0 8px; }
.recording-library__heading p, .recording-player p, .shared-recording-page p { color: var(--rec-muted); margin: 0; }
.recording-button { align-items: center; background: transparent; border: 1px solid var(--rec-line); border-radius: 11px; color: var(--rec-ink); cursor: pointer; display: inline-flex; font: inherit; font-size: .83rem; font-weight: 700; gap: 8px; justify-content: center; min-height: 44px; padding: 9px 13px; text-decoration: none; }
.recording-button:hover:not(:disabled) { background: color-mix(in srgb, var(--rec-surface) 88%, #3268da); color: var(--rec-ink); }
.recording-button:focus-visible, .recording-search input:focus-visible, .recording-share input:focus-visible { outline: 3px solid #759dff; outline-offset: 2px; }
.recording-button:disabled { cursor: not-allowed; opacity: .5; }
.recording-button--primary { background: #3268da; border-color: #3268da; color: #fff; }
.recording-button--primary:hover:not(:disabled) { background: #2459c4; color: #fff; }
.recording-button--danger { color: #cf3548; }
.recording-alert { background: var(--rec-surface); border: 1px solid var(--rec-line); border-radius: 12px; padding: 14px; }
.recording-alert--error { border-color: #bd4055; }
.recording-search { margin: 20px 0; }
.recording-search label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 8px; }
.recording-search > div, .recording-share > div { display: flex; gap: 8px; }
.recording-search input, .recording-share input { background: var(--rec-surface); border: 1px solid var(--rec-line); border-radius: 10px; color: var(--rec-ink); flex: 1; font: inherit; min-width: 0; padding: 11px 13px; }
.recording-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recording-card { background: var(--rec-surface); border: 1px solid var(--rec-line); border-radius: 18px; min-width: 0; overflow: hidden; }
.recording-card__preview { align-items: center; background: linear-gradient(135deg, #1e335b, #315d9c); color: #dbe8ff; display: flex; height: 128px; justify-content: center; position: relative; }
.recording-card__preview > i { font-size: 2.4rem; }
.recording-card__preview > span { background: #0d183fc9; border-radius: 7px; bottom: 12px; font-size: .8rem; padding: 4px 8px; position: absolute; right: 12px; }
.recording-card__body { padding: 18px; }
.recording-card time, .recording-card small { color: var(--rec-muted); display: block; font-size: .78rem; }
.recording-card h2 { font-size: 1.05rem; line-height: 1.45; margin: 10px 0; overflow-wrap: anywhere; }
.recording-card p { font-size: .84rem; margin-bottom: 8px; overflow-wrap: anywhere; }
.recording-card__share { margin-top: 8px; }
.recording-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.recording-empty { background: var(--rec-surface); border: 1px dashed var(--rec-line); border-radius: 18px; color: var(--rec-muted); padding: 45px 20px; text-align: center; }
.recording-empty > i { color: #3268da; font-size: 2.5rem; }
.recording-empty h2 { color: var(--rec-ink); font-size: 1.2rem; margin: 16px 0 8px; }
.recording-player { background: var(--rec-surface); border: 1px solid var(--rec-line); border-radius: 18px; padding: clamp(14px, 3vw, 24px); }
.recording-back { color: #3268da; font-size: .9rem; text-decoration: none; }
.recording-player h2 { font-size: 1.25rem; margin: 18px 0 8px; overflow-wrap: anywhere; }
.recording-player video, .shared-recording-page video { background: #111927; border-radius: 12px; display: block; margin: 18px 0 0; max-height: 75dvh; width: 100%; }
.recording-pagination { align-items: center; display: flex; flex-wrap: wrap; font-size: .82rem; gap: 12px; justify-content: center; margin: 24px 0; }
.recording-share { background: var(--rec-surface); border: 1px solid #3268da; border-radius: 14px; margin-top: 18px; padding: 18px; }
.recording-share p { color: var(--rec-muted); font-size: .86rem; margin: 8px 0 14px; }
.recording-share > button { margin-top: 12px; }
.recording-delete-dialog { background: var(--rec-surface); border: 1px solid var(--rec-line); border-radius: 18px; color: var(--rec-ink); margin: auto; max-height: 85dvh; max-width: 500px; padding: 24px; width: calc(100% - 24px); }
.recording-delete-dialog::backdrop { background: #0b122bb3; backdrop-filter: blur(4px); }
.recording-delete-dialog h2 { font-size: 1.25rem; }
.recording-delete-dialog p { line-height: 1.5; overflow-wrap: anywhere; }
.shared-recording-page { max-width: 1000px; padding: clamp(18px, 4vw, 44px); }
.shared-recording-page video + p { font-size: .85rem; line-height: 1.5; margin-top: 20px; }
body.dark-theme .recording-library, body.dark-theme .shared-recording-page { --rec-line: #3c4654; --rec-muted: #abb6c8; }
body.dark-theme .recording-button--danger { color: #ff9faa; }
@media(max-width: 1100px) { .recording-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width: 580px) { .recording-grid { grid-template-columns: minmax(0, 1fr); } .recording-library__heading { align-items: flex-start; flex-direction: column; } .recording-card__preview { height: 100px; } .recording-share > div { flex-direction: column; } .recording-actions { gap: 6px; } }