* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0b0b0f; color: #f2f2f5; font-family: system-ui, sans-serif; overflow: hidden; }
.hidden { display: none !important; }

.library-header { padding: 24px; }
.library-header h1 { font-size: 28px; margin-bottom: 16px; }
.import-row { display: flex; gap: 12px; }
#import-url { flex: 1; padding: 16px; font-size: 18px; border-radius: 10px; border: none; background: #1c1c24; color: #fff; }
#import-btn { padding: 16px 28px; font-size: 18px; border-radius: 10px; border: none; background: #4f7cff; color: #fff; }
#import-status { margin-top: 10px; min-height: 22px; color: #9aa; }

.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; padding: 0 24px 24px; overflow-y: auto; height: calc(100% - 140px); }
.library-item { background: #16161d; border-radius: 12px; overflow: hidden; cursor: pointer; }
.library-item img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.library-item .title { padding: 12px; font-size: 16px; }

#player-view { position: fixed; inset: 0; background: #000; }
#hidden-video { position: absolute; width: 1px; height: 1px; opacity: 0; }
#player-canvas { width: 100%; height: 100%; object-fit: contain; display: block; }

#freeze-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(180, 0, 0, 0.85); color: #fff; font-size: 32px; text-align: center; padding: 40px; z-index: 20;
}

#controls {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; background: linear-gradient(transparent, rgba(0,0,0,0.85));
  transition: opacity 0.3s; z-index: 10;
}
#controls.hidden-controls { opacity: 0; pointer-events: none; }
#controls button { width: 56px; height: 56px; font-size: 22px; border-radius: 50%; border: none; background: #ffffff22; color: #fff; }
#seek-bar { flex: 1; height: 44px; }
#volume-slider { width: 120px; }
#now-playing-title { flex: 0 0 auto; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }