:root {
    --plex-accent: #e5a00d;
    --plex-accent-hover: #f2b830;
    --plex-accent-active: #cc8d09;
    --plex-accent-text: #f2b830;
    --plex-accent-rgb: 229, 160, 13;
}
.activity-page { max-width: 1400px; margin-inline: auto; }
.activity-title { min-width: 220px; max-width: 650px; overflow-wrap: anywhere; }
.activity-history-table time { white-space: nowrap; }
.activity-bar-row { margin-top: 1rem; }
.activity-bar-track { height: 9px; margin-top: .35rem; background: var(--bs-tertiary-bg); border-radius: 5px; overflow: hidden; }
.activity-bar { height: 100%; background: var(--plex-accent); border-radius: inherit; }
.activity-chart { display: block; width: 100%; min-width: 480px; }
.activity-chart-scroll { overflow-x: auto; }
.activity-chart-axis { stroke: var(--bs-border-color); }
.activity-chart-label { fill: var(--bs-secondary-color); font-size: 12px; }
.activity-line { fill: none; stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.activity-series-0 { stroke: var(--plex-accent); background: var(--plex-accent); }
.activity-series-1 { stroke: #83b7a4; background: #83b7a4; stroke-dasharray: 7 4; }
.activity-legend { display: inline-block; width: 18px; height: 3px; vertical-align: middle; }
[data-bs-theme="light"], html:not([data-bs-theme]) { --plex-accent-text: #855700; }
.btn-primary, .btn-warning {
    --bs-btn-color: #191919;
    --bs-btn-bg: var(--plex-accent);
    --bs-btn-border-color: var(--plex-accent);
    --bs-btn-hover-color: #191919;
    --bs-btn-hover-bg: var(--plex-accent-hover);
    --bs-btn-hover-border-color: var(--plex-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--plex-accent-rgb);
    --bs-btn-active-color: #191919;
    --bs-btn-active-bg: var(--plex-accent-active);
    --bs-btn-active-border-color: var(--plex-accent-active);
    --bs-btn-disabled-color: #191919;
    --bs-btn-disabled-bg: var(--plex-accent);
    --bs-btn-disabled-border-color: var(--plex-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--plex-accent-text);
    --bs-btn-border-color: var(--plex-accent);
    --bs-btn-hover-color: #191919;
    --bs-btn-hover-bg: var(--plex-accent);
    --bs-btn-hover-border-color: var(--plex-accent);
    --bs-btn-focus-shadow-rgb: var(--plex-accent-rgb);
    --bs-btn-active-color: #191919;
    --bs-btn-active-bg: var(--plex-accent-active);
    --bs-btn-active-border-color: var(--plex-accent-active);
    --bs-btn-disabled-color: var(--plex-accent-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--plex-accent);
}
.btn-link { --bs-btn-color: var(--plex-accent-text); --bs-btn-hover-color: var(--plex-accent-text); --bs-btn-active-color: var(--plex-accent-text); --bs-btn-focus-shadow-rgb: var(--plex-accent-rgb); }
.badge.text-bg-primary, .badge.text-bg-warning { color: #191919 !important; background-color: var(--plex-accent) !important; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--plex-accent); --bs-nav-pills-link-active-color: #191919; --bs-nav-link-color: var(--plex-accent-text); --bs-nav-link-hover-color: var(--plex-accent-text); }
.form-check-input:checked { background-color: var(--plex-accent); border-color: var(--plex-accent); }
.form-check-input:focus { border-color: var(--plex-accent); box-shadow: 0 0 0 .25rem rgba(var(--plex-accent-rgb), .25); }
.spotty {
    --header-height: 116px;
    --spot-bg: #0b1119;
    --spot-panel: #141d29;
    --spot-border: #293547;
    --spot-muted: #a5b4cb;
    --spot-accent: var(--plex-accent);
    --bs-body-bg: var(--spot-bg);
    --bs-body-color: #e7ecf6;
    --bs-secondary-color: var(--spot-muted);
    --bs-border-color: var(--spot-border);
    --bs-tertiary-bg: var(--spot-panel);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .9rem;
    background: var(--spot-bg);
}
[data-bs-theme="light"] .spotty {
    --spot-bg: #eef2f7;
    --spot-panel: #fff;
    --spot-border: #d0d9e6;
    --spot-muted: #526078;
    --bs-body-color: #192438;
}
.spotty a { text-decoration: none; }
.spot-emoticon { display: inline-block; vertical-align: baseline; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.25em; line-height: 1.5; margin-inline: .08em; }
.spot-emoticon-badge { padding: .05em .4em; border: 1px solid var(--spot-border); border-radius: 999px; background: var(--spot-panel); font-size: 1em; white-space: nowrap; }
.spot-emoticon-label { font-family: system-ui, sans-serif; font-size: .75em; font-weight: 650; }
.spotty .key-confirm { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; color: var(--bs-body-color); }
.key-confirm:not([open]) { display: none; }
.key-confirm::backdrop { background: #0009; }
.download-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(580px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--spot-border); background: var(--spot-bg); color: var(--bs-body-color); overflow: hidden; }
.download-drawer[open] { display: flex; flex-direction: column; animation: download-in .2s ease-out; }
.download-drawer.is-closing { animation: download-out .2s ease-in forwards; }
.download-drawer::backdrop { background: #0008; }
.download-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--spot-border); background: var(--spot-panel); flex-shrink: 0; }
.download-body { padding: 1.25rem; overflow-y: auto; min-height: 0; overscroll-behavior: contain; overflow-wrap: anywhere; }
.download-chart { display: block; width: 100%; height: 100px; overflow: visible; }
.download-chart polyline { stroke: var(--bs-primary); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.download-chart circle { fill: var(--bs-primary); }
.download-chart [hidden] { display: none; }
.chart-grid { stroke: var(--spot-border); fill: none; }
.download-item { padding: .8rem 0; border-bottom: 1px solid var(--spot-border); }
.download-item progress { width: 100%; height: .5rem; accent-color: var(--bs-primary); }
.settings-navigation { position: sticky; top: 0; z-index: 3; background: var(--spot-bg); padding-block: .75rem; border-bottom: 1px solid var(--spot-border); }
[data-admin-panel][hidden], [data-preferences-panel][hidden], [data-sab-confirm][hidden] { display: none !important; }
@keyframes download-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes download-out { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .download-drawer[open], .download-drawer.is-closing { animation: none; } }
.sidebar {
    position: fixed;
    inset: var(--header-height) auto 0 0;
    width: 218px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--spot-panel), var(--spot-bg));
    border-right: 1px solid var(--spot-border);
    padding: 24px 14px;
    overflow-y: auto;
    z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 750; color: var(--bs-body-color); flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; border-radius: 8px; }
.application-logo { display: block; width: 100%; max-width: 384px; height: auto; margin-inline: auto; border-radius: 14px; }
.nav-caption { margin: 16px 10px 12px; font-size: .7rem; color: var(--spot-muted); text-transform: uppercase; letter-spacing: .1em; }
.side-link { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; margin: 3px 0; color: var(--spot-muted); border-radius: 7px; border-left: 2px solid transparent; }
.side-link:hover, .side-link.active { color: var(--bs-body-color); background: rgba(var(--plex-accent-rgb), .14); border-left-color: var(--spot-accent); }
.side-count { border-radius: 4px; padding: 0 6px; background: rgba(var(--plex-accent-rgb), .14); color: var(--plex-accent-text); font-size: .75rem; }
.sidebar-footer { margin-top: auto; padding: 24px 8px 0; }
.workspace { margin-left: 218px; min-width: 0; padding-top: var(--header-height); }
.topbar { position: fixed; inset: 0 0 auto; height: var(--header-height); z-index: 20; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 10px 26px; border-bottom: 1px solid var(--spot-border); background: var(--spot-panel); }
.header-menu { display: flex; align-items: center; gap: 24px; min-width: 0; }
.global-search { display: flex; gap: 8px; width: min(720px, 100%); margin-left: 0; max-width: 100%; }
.global-search .form-control { background: var(--spot-bg); }
.user-menu { position: relative; margin-left: auto; }
.account-link { display: block; color: var(--bs-body-color); overflow: hidden; max-width: 180px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; list-style: none; }
.account-link::-webkit-details-marker { display: none; }
.account-link::after { content: ""; display: inline-block; margin-left: 7px; vertical-align: .2em; border: .3em solid transparent; border-top-color: currentColor; transform: translateY(.15em); }
.user-menu-dropdown { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 180px; padding: 6px; border: 1px solid var(--spot-border); border-radius: 8px; background: var(--spot-panel); box-shadow: 0 8px 24px #0005; }
.dropdown-link { display: block; padding: 8px 10px; border-radius: 5px; color: var(--bs-body-color); }
.dropdown-link:hover, .dropdown-link:focus { color: var(--bs-body-color); background: rgba(var(--plex-accent-rgb), .14); }
.retrieve-control { display: flex; align-items: center; gap: 10px; min-width: 0; }
.retrieve-control form { margin: 0; flex-shrink: 0; }
.retrieve-status { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.retrieve-status [data-retrieve-last] { white-space: nowrap; }
.retrieve-status-message { display: flex; align-items: center; gap: 2px; }
.retrieve-status-message [data-retrieve-state]:empty { display: none; }
.retrieve-control [data-retrieve-indicator][hidden] { display: none; }
.content { padding: 26px; height: calc(100dvh - var(--header-height)); overflow-y: auto; scroll-padding-top: 16px; }
.browse-page { display: flex; flex-direction: column; overflow: hidden; }
.browse-page > .page-heading { flex-shrink: 0; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-heading h1 { font-weight: 750; letter-spacing: -.03em; }
.page-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid var(--spot-border); border-radius: 999px; color: var(--plex-accent-text); font-size: .78rem; }
.tag-chip:hover { background: rgba(var(--plex-accent-rgb), .14); color: var(--bs-body-color); }
.browse-grid { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.spot-list { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; }
.spot-list .table-responsive { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.spot-list .card-footer { flex-shrink: 0; }
.spot-table { table-layout: fixed; width: 100%; }
.spot-table thead { position: sticky; top: 0; z-index: 1; background: var(--spot-panel); }
.category-group { margin: 12px 0; }
.category-group summary { padding: 8px; font-size: .8rem; font-weight: 650; color: var(--spot-muted); }
.category-group .side-link { font-size: .8rem; padding: 6px 10px; }
.category-group .side-link > .side-count { align-self: start; }
.spotty .card { background: var(--spot-panel); border-color: var(--spot-border); border-radius: 10px; overflow: hidden; }
.spotty .card-header { padding: 14px 18px; font-weight: 650; background: transparent; border-color: var(--spot-border); }
.spotty .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--spot-border); --bs-table-hover-bg: rgba(55, 129, 255, .1); font-size: .79rem; }
.spot-table th { color: var(--spot-muted); font-weight: 500; }
.spot-table th, .spot-table td { overflow-wrap: anywhere; white-space: normal; }
.spot-table td { padding: 9px 10px; }
.spot-table tr[data-spot-id] { cursor: pointer; }
.spot-table th.column-title { width: 36%; }
.spot-table th.column-cover { width: 64px; }
.spot-table th.column-size { width: 85px; }
.spot-table td.column-cover { padding: 6px 8px; }
.spot-table .selected { background: rgba(55, 129, 255, .22); }
.spot-title { color: var(--bs-body-color); font-weight: 600; }
.spot-subtitle { margin-top: 4px; font-size: .72rem; color: var(--spot-muted); }
.spot-table .cover-cell { width: 58px; min-width: 58px; padding: 6px 8px; }
.spot-thumbnail { width: 42px; height: 54px; object-fit: cover; border-radius: 4px; }
.cover-placeholder { display: grid; place-items: center; min-height: 140px; background: var(--spot-bg); color: var(--spot-muted); border-radius: 8px; text-align: center; }
.cover-placeholder.small { width: 42px; min-height: 54px; font-size: .6rem; }
.cover-placeholder.has-image { position: relative; overflow: hidden; }
.cover-placeholder.has-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-failed { position: relative; }
.image-failed:not(.spot-poster) { width: 42px; height: 54px; }
[data-image-fallback]:not([hidden]) { position: absolute; inset: 0; }
[data-image-fallback] > .cover-placeholder { width: 100%; height: 100%; min-height: 0; }
.format-badge { display: inline-block; max-width: 100%; border-radius: 4px; padding: 3px 6px; color: #191919; background: var(--plex-accent); white-space: normal; overflow-wrap: anywhere; }
.load-sentinel { padding: 18px; text-align: center; }
.preview-drawer { position: fixed; top: calc(var(--header-height) + 12px); bottom: 12px; right: 12px; width: min(620px, calc(100% - 242px)); z-index: 15; display: flex; flex-direction: column; border: 1px solid var(--spot-border); border-radius: 12px; background: var(--spot-bg); box-shadow: -12px 0 36px #0006; transform: translateX(calc(100% + 16px)); visibility: hidden; transition: transform .24s ease, visibility 0s .24s; }
.preview-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform .24s ease, visibility 0s; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--spot-border); flex-shrink: 0; }
.preview { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 16px; }
.preview:focus-visible { outline: 2px solid var(--spot-accent); outline-offset: 2px; }
.spot-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 28px; padding: 30px; border-radius: 12px; background: var(--spot-panel); margin-bottom: 20px; }
.hero-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.hero-actions .btn { font-size: .75rem; }
.hero-actions > .btn, .hero-buttons > .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; line-height: 1.2; }
.hero-actions .metadata-link { margin-right: auto; padding-left: 0; }
.hero-sources { flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-width: 0; }
.hero-sources .metadata-link { margin-right: 0; padding: 0; }
.hero-sources .metadata-attributions { display: contents; }
.hero-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.trailer-button, .media-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 4px; border: 1px solid var(--spot-border); border-radius: 6px; background: var(--spot-bg); color: var(--bs-body-color); }
.trailer-button:hover, .media-button:hover { border-color: var(--plex-accent); color: var(--plex-accent); }
.trailer-button:focus-visible, .media-button:focus-visible { outline: 3px solid var(--plex-accent); outline-offset: 2px; }
.spot-title-line { display: flex; align-items: flex-start; gap: 8px; }
.spot-title-line > div { min-width: 0; }
.favorite-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 4px; border: 1px solid var(--spot-border); border-radius: 6px; background: var(--spot-bg); color: var(--bs-body-color); cursor: pointer; }
.favorite-ribbon { fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.favorite-star { fill: var(--spot-bg); }
.favorite-button.is-favorite { color: var(--plex-accent); }
.favorite-button:hover { border-color: var(--plex-accent); }
.favorite-button:focus-visible { outline: 3px solid var(--plex-accent); outline-offset: 2px; }
.favorite-button:disabled { opacity: .55; cursor: wait; }
.favorite-notice { position: fixed; right: 16px; bottom: 16px; z-index: 1100; max-width: min(420px, calc(100vw - 32px)); margin: 0; }
.metadata-attribution { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.metadata-attribution img { width: 74px; height: 40px; object-fit: contain; }
.metadata-attribution img.tvdb-logo-dark, .metadata-attribution img.tvdb-logo-light { width: auto; height: 16px; }
.tvdb-logo-light { display: none; }
[data-bs-theme="light"] .tvdb-logo-dark { display: none; }
[data-bs-theme="light"] .tvdb-logo-light { display: inline; }
.metadata-attributions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.metadata-attribution img.tmdb-logo, .tmdb-logo { width: 56px; height: 14px; object-fit: contain; }
.metadata-notice { flex-basis: 100%; margin: 0; font-size: .75rem; }
.metadata-badges { margin-block: 8px; }
.metadata-score, .metadata-certification { font-size: .85rem; font-weight: 600; padding: .4em .65em; }
.metadata-score { background: #032541; color: #fff; border: 1px solid #01b4e4; }
.metadata-score small { font-weight: 400; opacity: .8; }
.metadata-certification { background: transparent; color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
.trailer-frame { width: min(100%, calc((100dvh - 200px) * 16 / 9)); margin-inline: auto; border-radius: 8px; overflow: hidden; background: #000; }
.trailer-frame iframe { border: 0; }
.trailer-body { padding: 12px 16px 16px; }
.trailer-dialog .btn.active { background: transparent; border-color: var(--plex-accent); color: var(--plex-accent); }
.metadata-drawer:not([open]) { display: none; }
.metadata-hero .hero-backdrop, .music-hero .hero-backdrop { left: auto; width: auto; max-width: 100%; filter: none; object-fit: contain; object-position: right center; transform: none; mask-image: linear-gradient(90deg, transparent, #000 18%); }
.metadata-hero::after, .music-hero::after { background: linear-gradient(90deg, rgba(11,17,25,.96), rgba(11,17,25,.85) 35%, rgba(11,17,25,.4) 75%, rgba(11,17,25,.3)); }
[data-bs-theme="light"] .metadata-hero::after, [data-bs-theme="light"] .music-hero::after { background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.85) 35%, rgba(255,255,255,.4) 75%, rgba(255,255,255,.3)); }
.metadata-overview { line-height: 1.7; white-space: normal; overflow-wrap: anywhere; }
.metadata-facts, .metadata-release { overflow-wrap: anywhere; }
.release-quality { margin-block: 16px; overflow-wrap: anywhere; }
.release-quality dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px 20px; margin-bottom: 6px; }
.release-quality dt { font-size: .8rem; color: var(--spot-muted); }
.release-quality dd { margin: 3px 0 0; font-size: .9rem; }
.quality-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.quality-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; max-width: 100%; padding: 4px 9px; border: 1px solid var(--spot-border); border-radius: 5px; background: var(--spot-bg); color: var(--bs-body-color); font-size: .75rem; line-height: 1.35; overflow-wrap: anywhere; text-align: center; }
.quality-badge-format { border-color: var(--spot-muted); font-weight: 750; letter-spacing: .035em; }
.release-quality > small { display: block; font-size: .7rem; }
.episode-hero .spot-poster { height: auto; aspect-ratio: 16 / 9; }
.episode-hero .poster-enlarge { height: auto; aspect-ratio: 16 / 9; }
.metadata-people .people-list { display: flex; gap: 22px; overflow-x: auto; padding-block: 12px; }
.person-card { flex: 0 0 120px; text-align: center; display: flex; flex-direction: column; gap: 5px; overflow-wrap: anywhere; }
.person-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.person-card span, .person-card small { color: var(--spot-muted); }
.spot-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,17,25,.55), rgba(11,17,25,.72)); }
[data-bs-theme="light"] .spot-hero::after { background: linear-gradient(90deg, rgba(255,255,255,.48), rgba(255,255,255,.82)); }
.hero-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; filter: blur(6px); transform: scale(1.04); z-index: -2; pointer-events: none; }
.spot-hero h1, .spot-hero h2 { font-weight: 750; letter-spacing: -.03em; overflow-wrap: anywhere; }
.hero-poster { min-width: 0; }
.hero-copy { min-width: 0; }
.spot-poster, .hero-poster > .cover-placeholder { position: relative; width: 230px; height: 345px; overflow: hidden; border-radius: 8px; background: var(--spot-bg); display: grid; place-items: center; isolation: isolate; }
.poster-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.65); transform: scale(1.15); z-index: -1; pointer-events: none; }
.spot-poster-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.poster-enlarge { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; cursor: zoom-in; }
.poster-enlarge .spot-poster-image { max-height: 345px; }
.poster-enlarge:focus-visible { outline: 3px solid var(--spot-accent); outline-offset: -3px; }
.image-failed .poster-enlarge { display: none; }
.image-lightbox { padding: 0; border: 1px solid var(--spot-border); border-radius: 12px; background: var(--spot-bg); color: var(--bs-body-color); width: min(1200px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.image-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--spot-border); }
.lightbox-toolbar h2 { overflow-wrap: anywhere; min-width: 0; }
.lightbox-toolbar button { flex-shrink: 0; }
.lightbox-body { display: grid; place-items: center; padding: 12px; overflow: auto; }
.lightbox-image { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; }
.image-lightbox.has-gallery .lightbox-image { max-height: calc(100dvh - 205px); }
.lightbox-navigation { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 12px; border-top: 1px solid var(--spot-border); }
.lightbox-navigation[hidden] { display: none; }
.lightbox-retry { display: block; margin: 0 auto 12px; }
.lightbox-retry[hidden] { display: none; }
.music-hero { grid-template-columns: 220px minmax(0, 1fr); background: linear-gradient(135deg, var(--spot-panel), var(--spot-bg)); }
.music-hero .spot-poster, .music-hero .spot-poster-image { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.music-hero .hero-poster > .cover-placeholder { width: 100%; height: auto; aspect-ratio: 1; }
.music-artist-symbol { display: grid; place-items: center; aspect-ratio: 1; width: 100%; min-height: 0; overflow: hidden; border-radius: 50%; background: var(--spot-accent); color: #171717; font-size: clamp(2rem, 6vw, 5rem); line-height: 1; }
.music-artist-name { font-size: 1.25rem; font-weight: 600; }
.music-track { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--spot-border); overflow-wrap: anywhere; }
.preview .spot-hero { grid-template-columns: 110px minmax(0, 1fr); padding: 20px; gap: 16px; }
.preview .music-hero .spot-poster, .preview .music-hero .spot-poster-image, .preview .music-hero .hero-poster > .cover-placeholder { height: auto; aspect-ratio: 1; }
.preview .spot-poster, .preview .hero-poster > .cover-placeholder { width: 110px; height: 165px; }
.preview .poster-enlarge .spot-poster-image { max-height: 165px; }
.preview .spot-hero h2 { font-size: 1.3rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.tag-chip { font-size: .75rem; padding: 5px 10px; border: 1px solid var(--plex-accent); border-radius: 20px; background: var(--spot-bg); color: var(--plex-accent-text); }
.metadata-strip { display: flex; flex-wrap: wrap; gap: 16px 30px; padding: 20px; border: 1px solid var(--spot-border); background: var(--spot-panel); border-radius: 10px; margin-bottom: 20px; }
.metadata-strip div { flex: 1; min-width: 130px; overflow-wrap: anywhere; }
.metadata-strip small { display: block; color: var(--spot-muted); margin-bottom: 6px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.spot-description { white-space: normal; overflow-wrap: anywhere; line-height: 1.75; }
.spot-description > :last-child { margin-bottom: 0; }
.spot-description pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.spot-description table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.spot-description td, .spot-description th { padding: 6px; border: 1px solid var(--spot-border); }
.spot-description blockquote { border-left: 3px solid var(--spot-accent); padding-left: 14px; color: var(--spot-muted); }
.spot-description h1, .spot-description h2, .spot-description h3 { font-size: 1.2rem; }
.technical { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 10px; font-size: .8rem; margin: 0; }
.technical dt { color: var(--spot-muted); font-weight: 500; margin: 0; }
.technical dd { margin: 0; overflow-wrap: anywhere; }
.preview .technical { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 8px; }
.preview .technical dt { margin: 0; }
.preview .technical dd { margin: 0; }
.comment-body { overflow-wrap: anywhere; }
.skip-link { position: absolute; z-index: 100; background: var(--spot-panel); padding: 10px; }
@media (min-width: 1700px) {
    .spot-table { font-size: .86rem !important; }
    .content { padding: 30px; }
}
@media (max-width: 1199px) {
    .header-menu { gap: 14px; }
}
@media (max-width: 950px) {
    .spot-table thead { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; }
    .spot-table, .spot-table tbody { display: block; }
    .spot-table tr { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px; border-bottom: 1px solid var(--spot-border); }
    .spot-table td { display: block; border: 0; padding: 0; max-width: 100%; min-width: 0; }
    .spot-table td.column-title { flex: 1 1 calc(100% - 70px); }
    .spot-table td.column-cover { padding: 0; }
    .spot-table td:not(.column-title):not(.column-cover)::before { content: attr(data-label) ": "; color: var(--spot-muted); }
}
@media (max-width: 767px) {
    .settings-navigation { top: var(--header-height); }
    .spotty { --header-height: 150px; padding-top: var(--header-height); }
    .sidebar { position: static; width: 100%; padding: 10px 16px; max-height: 280px; }
    .brand { font-size: 1rem; }
    .brand-mark { width: 26px; height: 26px; }
    .header-menu { flex-wrap: wrap; gap: 8px; }
    .sidebar .nav-caption { margin-top: 0; }
    .sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 0; }
    .sidebar-footer form { margin-top: 0 !important; }
    .side-link { font-size: .8rem; padding: 6px 8px; }
    .workspace { margin-left: 0; padding-top: 0; }
    .topbar { padding: 10px 16px; }
    .global-search { margin-left: 0; width: 100%; max-width: 100%; }
    .user-menu { flex: 1 1 0; min-width: 0; max-width: 150px; }
    .account-link { max-width: 100%; font-size: .8rem; }
    .content { padding: 18px 12px; height: auto; overflow: visible; }
    .browse-page { display: block; }
    .spot-list .table-responsive { overflow: visible; }
    .preview-drawer { width: calc(100% - 16px); right: 8px; bottom: 8px; top: calc(var(--header-height) + 8px); }
    .preview { padding: 10px; }
    .preview .spot-hero { padding: 12px; gap: 12px; grid-template-columns: 90px minmax(0, 1fr); }
    .preview .spot-poster, .preview .hero-poster > .cover-placeholder { width: 90px; height: 135px; }
    .preview .poster-enlarge .spot-poster-image { max-height: 135px; }
    .preview .spot-hero h2 { font-size: 1.1rem; }
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
    .spot-hero { padding: 18px; grid-template-columns: 105px minmax(0, 1fr); gap: 16px; }
    .spot-poster, .hero-poster > .cover-placeholder { width: 105px; height: 158px; }
    .poster-enlarge .spot-poster-image { max-height: 158px; }
    .spot-hero h1 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .preview-drawer, .preview-drawer.is-open { transition: none; }
}
.account-avatar { border-radius: 50%; object-fit: cover; vertical-align: middle; }