* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0d0d0d; color: #e0e0e0; -webkit-tap-highlight-color: transparent; }
#app { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
#player-panel { flex-shrink: 0; background: #000; }
#player-container { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; background: #111; aspect-ratio: 16/9; cursor: pointer; }
#video-player { width: 100%; height: 100%; display: block; object-fit: contain; }
#player-container:fullscreen { width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; background: #000; }
#player-container:fullscreen #video-player { object-fit: contain; }
#player-container:fullscreen #player-overlay { cursor: default; padding: 90px 55px 55px; }
#player-container:-webkit-full-screen #player-overlay { cursor: default; padding: 90px 55px 55px; }

/* Center play button */
.big-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(1);
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: none;
  cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.25s, transform 0.15s;
  opacity: 0; pointer-events: none;
}
.big-play-btn.visible { opacity: 1; pointer-events: auto; }
.big-play-btn.visible:hover { transform: translate(-50%,-50%) scale(1.08); background: rgba(0,0,0,0.65); }

/* Loading spinner */
#loading-indicator {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  display: none; z-index: 10;
}
#loading-indicator.visible { display: flex; align-items: center; justify-content: center; }
.spinner { width: 64px; height: 64px; border: 5px solid rgba(255,255,255,0.12); border-top-color: #4f9fff; border-right-color: #4f9fff; border-radius: 50%; animation: spin 0.7s linear infinite; box-shadow: 0 0 20px rgba(79,159,255,0.15); will-change: transform; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Player overlay */
#player-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent 10%, rgba(0,0,0,0.85) 45%);
  padding: 90px 55px 55px;
  opacity: 0; transition: opacity 0.2s ease;
  cursor: default; pointer-events: none; z-index: 3;
}

/* Controls row */
#controls-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
#controls-left { display: flex; align-items: center; gap: 6px; }
#controls-left .yt-channel-name { font-size: 13px; }
#controls-right { display: flex; align-items: center; gap: 4px; }

.ctrl-btn {
  background: none; border: none; color: #fff;
  cursor: pointer; width: 42px; height: 42px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.15s;
}
.ctrl-btn:hover { background: rgba(255,255,255,0.12); }
.ctrl-btn svg { display: block; width: 22px; height: 22px; }

/* Volume area */
#volume-area { display: flex; align-items: center; gap: 0; position: relative; }
#volume-slider-wrap { width: 90px; overflow: hidden; flex-shrink: 0; }
@media (hover: hover) {
  #volume-slider-wrap { width: 0; transition: width 0.2s ease; }
  #volume-area:hover #volume-slider-wrap { width: 90px; }
}
#vol-slider { width: 72px; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.3); border-radius: 2px; outline: none; cursor: pointer; margin: 0 6px; }
#vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }
#vol-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }

.yt-channel-name { color: #ccc; font-size: 12px; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Channel panel */
#channel-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#search-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #151515; border-bottom: 1px solid #2a2a2a; flex-shrink: 0; }
#search-input { flex: 1; padding: 8px 12px; border: 1px solid #333; border-radius: 8px; background: #1a1a1a; color: #e0e0e0; font-size: 13px; outline: none; display: none; transition: border-color 0.2s; }
#search-input:focus { border-color: #4f9fff; }
#search-input::placeholder { color: #555; }
#search-toggle { background: none; border: none; color: #999; cursor: pointer; padding: 6px; line-height: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: color 0.2s, background 0.2s; }
#search-toggle:hover { color: #fff; background: #2a2a2a; }
#search-bar.open #search-input { display: block; }
#search-bar.open #search-toggle { color: #4f9fff; background: #1a2633; }

/* Category tabs */
#category-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 6px 8px; background: #111; border-bottom: 1px solid #222; flex-shrink: 0; }
.tab { padding: 5px 4px; cursor: pointer; text-align: center; font-size: 10px; font-weight: 500; color: #777; transition: color 0.2s, background 0.2s, border-color 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 38px; border-radius: 8px; border: 1px solid transparent; background: #1a1a1a; }
.tab:hover { color: #ccc; background: #222; border-color: #333; }
.tab.active { color: #fff; font-weight: 600; background: #1a2633; border-color: #4f9fff55; box-shadow: 0 0 10px #4f9fff15; }
.tab .count { font-size: 8px; background: #2a2a2a; color: #777; border-radius: 6px; padding: 0 5px; line-height: 13px; transition: background 0.2s, color 0.2s; }
.tab:hover .count { background: #3a3a3a; color: #aaa; }
.tab.active .count { background: #4f9fff33; color: #8cbfff; }

/* Channel grid */
#channel-grid { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px; padding-bottom: calc(24px + constant(safe-area-inset-bottom,0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom,0px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: start; }
.channel-card { background: #181818; border-radius: 10px; cursor: pointer; text-align: center; transition: transform 0.2s, background 0.2s, border-color 0.2s; border: 1px solid #2a2a2a; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 6px 4px; }
.channel-card:hover { background: #222; border-color: #444; transform: translateY(-1px); }
.channel-card.active { border-color: #4f9fff; background: #1a2633; box-shadow: 0 0 12px #4f9fff22; }
.channel-card img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; transition: transform 0.2s; background: #333; }
.channel-card:hover img { transform: scale(1.08); }
.channel-card .ch-name { font-size: 10px; line-height: 1.2; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; max-width: 100%; }
.channel-card .ch-name.no-logo { font-size: 12px; font-weight: 600; margin-top: 0; }

@media (min-width: 768px) {
  #app { flex-direction: row; }
  #player-panel { flex: 1; min-width: 0; }
  #player-container { max-width: 100%; height: 100%; aspect-ratio: auto; }
  #channel-panel { width: 280px; flex: none; border-left: 1px solid #2a2a2a; }
  #search-input { display: block; }
  #search-bar { padding: 8px 12px; }
  #channel-grid { padding-bottom: 8px; }
  #category-tabs { padding: 8px 10px; gap: 6px; }
  .tab { font-size: 11px; min-height: 40px; }
  .yt-channel-name { max-width: 300px; }
}
@media (max-width: 480px) {
  #channel-grid { gap: 4px; padding: 5px; padding-bottom: calc(24px + constant(safe-area-inset-bottom,0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom,0px)); }
  .channel-card { padding: 4px 2px; min-height: 60px; border-radius: 8px; }
  .channel-card img { width: 32px; height: 32px; }
  .channel-card .ch-name { font-size: 9px; margin-top: 2px; }
  .channel-card .ch-name.no-logo { font-size: 10px; }
  #category-tabs { padding: 4px 5px; gap: 4px; }
  .tab { font-size: 9px; min-height: 34px; padding: 3px 2px; border-radius: 6px; }
  .tab .count { font-size: 7px; line-height: 11px; }
  #player-overlay { padding: 70px 6px 30px; }
  .ctrl-btn { width: 38px; height: 38px; }
  .ctrl-btn svg { width: 20px; height: 20px; }
  #volume-slider-wrap { width: 66px; }
  #vol-slider { width: 54px; margin: 0 6px; }
  .yt-channel-name { max-width: 80px; font-size: 10px; }
}

#player-container.show-overlay #player-overlay {
  opacity: 1;
  pointer-events: auto;
}