.local-history-page { padding: 20px 16px 90px; }
.local-history-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.local-history-heading h1 { font-size:22px; }
.local-history-heading button, .local-history-pagination button, .local-history-remove { cursor:pointer; border:1px solid currentColor; border-radius:6px; padding:6px 12px; background:transparent; color:inherit; font:inherit; }
.local-history-heading button:disabled { opacity:.4; cursor:default; }
.local-history-note, .local-history-empty { opacity:.7; margin:12px 0 24px; font-size:14px; }
.local-history-row { display:flex; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid #8883; }
.local-history-cover { flex:0 0 72px; }
.local-history-cover img { width:72px; height:96px; object-fit:cover; border-radius:6px; }
.local-history-info { flex:1; min-width:0; }
.local-history-info h2 { font-size:16px; margin:0 0 8px; overflow-wrap:anywhere; }
.local-history-info a { display:block; }
.local-history-info time { display:block; font-size:12px; opacity:.65; margin-top:8px; }
.local-history-pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin:24px 0; }
.local-history-storage-error { padding:12px; background:#fff3cd; color:#664d03; font-size:14px; }

/* Homepage resume cards only. Each active template supplies its own palette. */
[data-channel-history-resume] { min-width:0; max-width:100%; margin:10px 0; }
[data-channel-history-resume][hidden] { display:none!important; }
[data-channel-history-resume] > a.channel-history-resume {
    box-sizing:border-box; position:static; display:flex; align-items:center; gap:12px;
    width:100%; min-width:0; max-width:100%; min-height:0; margin:0; padding:10px 12px;
    border:1px solid var(--video-border,var(--line,#8883)); border-radius:8px;
    background:var(--video-panel,var(--paper,var(--bg,#fff)));
    color:var(--video-text,var(--ink,var(--text,#222))); text-decoration:none; text-align:left;
}
[data-channel-history-resume] .channel-history-resume-cover {
    box-sizing:border-box; position:static; display:block; flex:0 0 44px;
    width:44px; min-width:44px; max-width:44px; height:58px; min-height:0;
    margin:0; padding:0; border:0; border-radius:4px; aspect-ratio:auto;
    object-fit:cover; object-position:center; transform:none;
}
[data-channel-history-resume] [data-history-channel="video"] .channel-history-resume-cover {
    flex-basis:78px; width:78px; min-width:78px; max-width:78px; height:44px;
}
[data-channel-history-resume] .channel-history-resume-info { flex:1 1 0; min-width:0; max-width:100%; }
[data-channel-history-resume] .channel-history-resume-info > strong,
[data-channel-history-resume] .channel-history-resume-info > small {
    display:block; max-width:100%; margin:0; padding:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; letter-spacing:normal; line-height:1.5;
}
[data-channel-history-resume] .channel-history-resume-info > strong { font-size:15px; font-weight:600; }
[data-channel-history-resume] .channel-history-resume-info > small { margin-top:3px; font-size:12px; font-weight:400; opacity:.7; }
[data-channel-history-resume] > a.channel-history-resume:focus-visible { outline:2px solid var(--video-accent,var(--green,var(--accent,#547587))); outline-offset:2px; }
/* Tighten only the banner which has a visible history card beneath it. */
main:has([data-channel-history-resume]:not([hidden])) .channel-banner { margin-bottom:0; }
[data-channel-history-resume]:not([hidden]) ~ :is(nav.catalog-nav,nav.quick-nav,nav.home-shortcuts) { margin-top:0; }
@media(max-width:540px) {
    [data-channel-history-resume] { margin-block:8px; }
    [data-channel-history-resume] > a.channel-history-resume { gap:10px; padding:8px 10px; }
    [data-channel-history-resume] .channel-history-resume-cover { flex-basis:40px; width:40px; min-width:40px; max-width:40px; height:54px; }
    [data-channel-history-resume] [data-history-channel="video"] .channel-history-resume-cover { flex-basis:72px; width:72px; min-width:72px; max-width:72px; height:41px; }
    [data-channel-history-resume] .channel-history-resume-info > strong { font-size:14px; }
}