:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #eef1f8; background: #090b10; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #1d2943 0, transparent 38%), #090b10; }
button, input, select { font: inherit; }
button { color: inherit; border: 1px solid #343b4b; background: #171b25; border-radius: 10px; padding: .72rem 1rem; cursor: pointer; }
button:hover { background: #222838; }
.primary { background: #5a68ff; border-color: #7883ff; }
.primary:hover { background: #6875ff; }
.shell { width: min(1500px, 100%); margin: auto; padding: 24px; }
header, .section-title, .now-playing { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.6rem, 3vw, 2.5rem); }
h2 { margin-bottom: .4rem; }
.eyebrow { margin-bottom: .3rem; font-size: .72rem; letter-spacing: .18em; color: #8994ad; }
.connection { display: flex; align-items: center; gap: 9px; color: #aeb7ca; }
#statusDot { width: 9px; height: 9px; border-radius: 50%; background: #7c8494; }
#statusDot.online { background: #50df93; box-shadow: 0 0 12px #50df93; }
.panel { border: 1px solid #252a36; border-radius: 18px; background: rgba(17, 20, 28, .92); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.setup { width: min(520px, 100%); margin: 72px auto; padding: 28px; }
.setup label { display: grid; gap: 8px; margin: 18px 0; }
input[type="password"], input[type="search"] { width: 100%; color: inherit; background: #0c0f16; border: 1px solid #323847; border-radius: 10px; padding: .78rem; }
.setup button { margin-right: 8px; margin-bottom: 10px; }
.muted { color: #919caf; font-size: .9rem; }
.hidden { display: none !important; }
.app { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; margin-top: 24px; }
.library { padding: 18px; min-height: 70vh; }
.compact { padding: .5rem .7rem; font-size: .84rem; }
.file-list { display: grid; gap: 6px; margin-top: 12px; max-height: 62vh; overflow: auto; }
.file-item { text-align: left; overflow-wrap: anywhere; padding: .68rem; }
.file-item.active { border-color: #7c87ff; background: #293052; }
.file-name { display: block; }
.file-path { display: block; margin-top: 3px; color: #7f899d; font-size: .73rem; }
.player-panel { overflow: hidden; }
.video-stage { position: relative; display: grid; place-items: center; min-height: 480px; background: #000; }
video { display: block; width: 100%; max-height: 75vh; }
.empty-state { position: absolute; color: #6e7789; }
.unlock { position: absolute; background: #5a68ff; }
.controls { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid #252a36; }
.play { width: 44px; flex: 0 0 auto; }
#progress { flex: 1; min-width: 100px; }
.inline { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: #abb4c5; }
.volume input { width: 90px; }
.now-playing { padding: 0 18px 16px; color: #8e98aa; font-size: .85rem; }
.playback-status { margin: -8px 18px 16px; }
.playback-status.error { color: #ff8b8b; }
#peerStatus { color: #c0c7d6; }
#toast { position: fixed; right: 24px; bottom: 24px; max-width: 420px; padding: 12px 16px; border-radius: 10px; background: #30384c; opacity: 0; transform: translateY(12px); transition: .2s; pointer-events: none; }
#toast.visible { opacity: 1; transform: none; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .library { min-height: auto; } .file-list { max-height: 240px; } .video-stage { min-height: 300px; } .controls { flex-wrap: wrap; } #progress { order: 5; flex-basis: 100%; } .volume { display: none; } }