:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101216; color: #f4f4f4; }
* { box-sizing: border-box; }
body { margin: 0; }
body.player-open { overflow: hidden; }
[x-cloak] { display: none !important; }
header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 2rem; background: #181b21; z-index: 1; }
h1 { margin: 0 0 .35rem; }
.path { color: #aab2c0; }
.view-switch { display: flex; gap: .35rem; padding: .3rem; border-radius: .55rem; background: #101216; }
.view-switch button { width: 2.7rem; height: 2.35rem; border: 0; border-radius: .4rem; background: transparent; color: #aab2c0; font-size: 1.15rem; cursor: pointer; }
.view-switch button.active { background: #354156; color: #fff; }
.view-switch button:hover, .view-switch button:focus { outline: none; background: #303746; color: #fff; }
main { padding: 1.5rem 2rem; }
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .9rem; }
.entries button { min-width: 0; min-height: 3.5rem; padding: .65rem; border: 2px solid transparent; border-radius: .6rem; background: #252a33; color: inherit; text-align: left; font-size: 1.05rem; cursor: pointer; }
.entries button.media, .entries button.directory { display: grid; grid-template-rows: auto auto; gap: .65rem; }
.entry-preview { display: grid; place-items: center; min-height: 2.2rem; border-radius: .4rem; font-size: 1.35rem; }
.entry-preview-media { width: 100%; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; background-color: #171a20; background-repeat: no-repeat; background-size: 500% 200%; font-size: 2rem; transition: background-image .15s ease; }
.preview-spinner { animation: player-spin 1s linear infinite; color: #aab2c0; }
.entry-name { display: block; width: 100%; overflow: hidden; white-space: nowrap; }
.entry-name-track { display: inline-block; min-width: max-content; }
.entry-name.is-overflowing .entry-name-track { animation: entry-marquee 14s linear infinite; }
@keyframes entry-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.entries button:focus { outline: none; border-color: #69a7ff; background: #303746; }
.entry-table-wrap { overflow-x: auto; border: 1px solid #343a45; border-radius: .65rem; }
.entry-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #20242c; }
.entry-table th { padding: .65rem .8rem; color: #aab2c0; background: #181b21; text-align: left; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.entry-table th:first-child { width: 11rem; }
.entry-table th:last-child { width: 7rem; }
.entry-table td { height: 5.25rem; padding: .45rem .8rem; border-top: 1px solid #343a45; overflow: hidden; color: #dce1e8; }
.entry-table tbody tr { cursor: pointer; }
.entry-table tbody tr:hover, .entry-table tbody tr:focus { outline: none; background: #303746; }
.table-preview { display: grid; place-items: center; width: 8rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .35rem; background-color: #171a20; background-repeat: no-repeat; background-size: 500% 200%; font-size: 1.35rem; }
.table-name { font-size: 1rem; }
.info-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem; background: rgba(0,0,0,.72); }
.info-dialog { position: relative; width: min(46rem, 100%); max-height: calc(100vh - 3rem); overflow: auto; padding: 1.4rem 1.5rem 1.5rem; border: 1px solid #465064; border-radius: .8rem; background: #1d222b; box-shadow: 0 1rem 4rem rgba(0,0,0,.55); }
.info-dialog h2 { margin: 0 3rem 1.2rem 0; }
.info-close { position: absolute; top: .9rem; right: .9rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: #303746; color: #fff; cursor: pointer; }
.info-loading { display: flex; align-items: center; gap: .65rem; color: #aab2c0; }
.info-grid { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .7rem 1rem; margin: 0; }
.info-grid dt { color: #9ea8b8; }
.info-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.info-grid small { display: block; margin-top: .2rem; color: #7f8999; }
.info-browser { font-size: .82rem; color: #b9c0cb; }
@media (max-width: 38rem) { .info-grid { grid-template-columns: 1fr; gap: .2rem; } .info-grid dd { margin-bottom: .65rem; } }
.error { color: #ff8989; }
.player { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #000; }
.player-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 40; width: 4rem; height: 4rem; display: grid; place-items: center; padding: 0; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 1.8rem; cursor: pointer; opacity: 1; transition: opacity .2s ease, transform .2s ease; }
.player-close.player-close-hidden { opacity: 0; pointer-events: none; }
.player-close:hover, .player-close:focus { outline: none; border-color: #fff; background: rgba(30,35,45,.95); transform: scale(1.05); }
.video-wrapper { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.video-wrapper video { display: block; width: 100%; height: 100%; object-fit: contain; }
.player-title { position: absolute; inset: 0 0 auto; z-index: 18; min-height: 7rem; padding: 1.4rem 6.5rem 3rem 1.6rem; overflow: hidden; color: #fff; background: linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 42%, transparent 100%); font-size: clamp(1.05rem, 2vw, 1.55rem); font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; opacity: 1; transition: opacity .2s ease; pointer-events: none; }
.player-title.player-title-hidden { opacity: 0; }
.player-freeze-frame { position: absolute; inset: 0; z-index: 15; width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-wrapper .cb-controlbar { --cb-accent: #69a7ff; font-family: system-ui, sans-serif; }
.player-status { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: #f4f4f4; background: #000; font-size: 1.1rem; }
.player-status-compact { inset: 1rem auto auto 50%; transform: translateX(-50%); flex-direction: row; padding: .6rem .9rem; border-radius: .5rem; background: rgba(0,0,0,.72); font-size: .9rem; white-space: nowrap; pointer-events: none; }
.player-status-compact .player-spinner { font-size: 1.15rem; }
.player-spinner { font-size: 3rem; animation: player-spin 1s linear infinite; }
@keyframes player-spin { to { transform: rotate(360deg); } }