:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  --bg: #101416;
  --surface: #1d2427;
  --text: #f0f3f1;
  --muted: #b3bdb9;
  --line: rgba(222, 238, 229, .1);
  --accent: #bdedb0;
  --ink: #19261a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: .875rem; line-height: 1.5; }
button, input { font: inherit; }
button, a, input, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; border-radius: 12px; min-height: 40px; padding: 9px 14px; font-weight: 500; transition: background 160ms ease-out, color 160ms ease-out, transform 140ms ease-out; }
button:active:not(:disabled), summary:active { transform: scale(.97); transition-duration: 80ms; }
button:disabled { opacity: .4; cursor: default; }
button:hover:not(:disabled), summary:hover { background: rgba(232, 243, 237, .08); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.primary { background: var(--accent); color: var(--ink); }
button.primary:hover { background: #d0f3c7; }
.quiet { background: transparent; color: var(--muted); }
.outline { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20; min-height: 76px; padding: 14px 24px;
  display: grid; grid-template-columns: minmax(235px, 1fr) minmax(0, 660px) minmax(235px, 1fr); align-items: center; gap: 24px;
  background: rgba(16, 20, 22, .83); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.brand { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; color: var(--accent); text-decoration: none; transition: background 160ms ease-out, transform 140ms ease-out; }
.brand:hover { background: rgba(189, 237, 176, .07); }
.brand:active { transform: scale(.96); }
.brand svg { width: 30px; height: 30px; stroke: none; }
.search { display: flex; align-items: center; gap: 10px; padding: 4px 5px 4px 15px; width: 100%; max-width: 660px; min-width: 0; margin: auto; border-radius: 16px; background: #242b2e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.search:focus-within { outline: 2px solid rgba(189, 237, 176, .65); outline-offset: 2px; }
.search input { width: 100%; min-width: 0; padding: 8px 0; border: 0; background: none; color: var(--text); }
.search input:focus-visible { outline: none; }
.search input::placeholder { color: var(--muted); }
.search svg { color: var(--muted); }
.search button { flex-shrink: 0; color: var(--text); }
.headeractions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.headeractions button { font-size: .8125rem; white-space: nowrap; }
#playlistToggle[aria-expanded="true"] { color: var(--accent); background: rgba(189, 237, 176, .08); }
#participants { position: relative; }
summary { list-style: none; cursor: pointer; color: var(--muted); padding: 10px 12px; min-height: 40px; font-size: .8125rem; letter-spacing: .005em; border-radius: 12px; white-space: nowrap; transition: background 160ms ease-out, transform 140ms ease-out; }
summary::-webkit-details-marker { display: none; }
#participants[open] summary { background: rgba(232, 243, 237, .08); color: var(--text); }
#members { position: absolute; right: 0; top: calc(100% + 12px); width: max-content; min-width: 200px; max-width: min(320px, calc(100vw - 32px)); padding: 10px; background: rgba(38, 46, 48, .94); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); box-shadow: 0 14px 42px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12); border-radius: 18px; z-index: 30; display: flex; flex-direction: column; max-height: min(420px, 65dvh); overflow: auto; transform-origin: top right; }
.member { padding: 9px 12px; font-size: .8125rem; overflow-wrap: anywhere; }
main { padding: 24px 24px 32px; max-width: 2000px; margin: auto; }
.is-home .topbar { position: absolute; inset: 0 0 auto; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.is-home { background: radial-gradient(ellipse at 50% 50%, rgba(189, 237, 176, .035), transparent 58%), var(--bg); }
.welcome { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; }
.welcome button { padding: 22px 34px; min-height: 76px; font-size: clamp(1.125rem, 3vw, 1.375rem); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; border-radius: 24px; background: linear-gradient(180deg, #cff3c4, #b4e4a7); box-shadow: 0 12px 36px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .55); }
.welcome button:hover:not(:disabled) { background: linear-gradient(180deg, #dcf8d4, #c2ecb7); }
.welcome button[aria-busy="true"] { cursor: progress; }
.watchgrid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; }
.watchgrid.playlist-collapsed { grid-template-columns: minmax(0, 1fr); }
.watch { min-width: 0; }
.playerframe { position: relative; width: 100%; aspect-ratio: 16/9; max-height: calc(100dvh - 168px); min-height: 200px; background: #000; border-radius: 14px; overflow: hidden; }
#player { position: absolute; inset: 0; width: 100%; height: 100%; }
.emptyplayer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #080b0c; color: #a0aaa5; font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 300; letter-spacing: -.025em; }
.now { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 2px 0; }
.now h1 { font-size: .875rem; font-weight: 500; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.now button { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .8125rem; }
.now button svg { width: 15px; height: 15px; }
.playlist { min-width: 0; max-height: calc(100dvh - 114px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #47514c transparent; }
.listhead { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 16px; }
.listhead h2 { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.small { color: var(--muted); font-size: .75rem; letter-spacing: .01em; }
#queue { list-style: none; margin: 0; padding: 0; }
#queue li { padding: 12px 8px 8px; margin-bottom: 8px; border-radius: 14px; }
#queue li:has(.current) { background: rgba(189, 237, 176, .065); }
.video { display: flex; gap: 12px; align-items: center; }
.video img { width: 88px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.video button { min-height: 44px; padding: 0; text-align: left; background: none; color: var(--text); font-size: .8125rem; line-height: 1.4; font-weight: 400; overflow-wrap: anywhere; }
.video button.current { color: var(--accent); font-weight: 500; }
.video button:hover { color: var(--accent); background: transparent; }
.actions { display: flex; justify-content: flex-end; gap: 2px; margin-top: 8px; }
.actions button { display: flex; align-items: center; justify-content: center; width: 36px; min-height: 36px; padding: 8px; background: transparent; color: var(--muted); border-radius: 10px; }
.actions svg { width: 17px; height: 17px; }
.actions button:hover:not(:disabled) { background: rgba(232, 243, 237, .07); }
.emptyqueue { color: var(--muted); font-size: .8125rem; padding: 20px 8px; border-top: 1px solid var(--line); }
.results { margin-bottom: 20px; padding: 16px; background: var(--surface); border-radius: 18px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.result img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.result h3 { font-size: .8125rem; line-height: 1.4; margin: 10px 0; font-weight: 500; }
.result button { font-size: .8125rem; }
#message { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 14px 20px; margin: 0; background: rgba(42, 51, 52, .94); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); color: var(--text); border-radius: 18px; box-shadow: 0 12px 36px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); max-width: min(560px, calc(100% - 32px)); width: max-content; z-index: 40; font-size: .8125rem; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
[hidden] { display: none !important; }
#activation { padding-top: 12px; }
@media (max-width: 1100px) {
  .topbar { grid-template-columns: minmax(220px, 1fr) minmax(0, 660px) minmax(220px, 1fr); gap: 12px; padding: 12px 16px; }
  .headeractions button, summary { padding: 10px; }
  .watchgrid { grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; }
  main { padding: 20px 16px; }
  .results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .topbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .headeractions { gap: 0; }
  .headeractions button, summary { padding: 10px 11px; min-height: 44px; }
  .search { order: 3; max-width: none; flex-basis: 100%; margin-top: 0; }
  .search button { min-height: 40px; }
  main { padding: 16px 12px 24px; }
  .watchgrid { grid-template-columns: 1fr; gap: 24px; }
  .playerframe { max-height: none; border-radius: 10px; }
  .playlist { max-height: none; }
  .now { gap: 10px; }
  .now h1 { font-size: .8125rem; }
  .now button { font-size: .75rem; padding-inline: 6px; }
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video img { width: 104px; }
  .actions button { width: 44px; min-height: 44px; }
  .listhead { padding-bottom: 10px; }
  #members { right: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: #14191b; }
  #members, #message { background: #293234; }
  .topbar, #members, #message { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #e0e7e1; --line: #76877c; }
  .topbar, #members, #message { background: #17201b; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .search, #members, #message { outline: 1px solid #829c87; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  button:active:not(:disabled), summary:active, .brand:active { transform: none; }
}


.actions .drag-handle { margin-right: auto; cursor: grab; touch-action: none; user-select: none; }
.actions .drag-handle:active { cursor: grabbing; }
#queue li.dragging { background: rgba(189,237,176,.12); outline: 1px solid var(--accent); opacity: .85; }
#queue li.drop-before { box-shadow: 0 -2px 0 var(--accent); } #queue li.drop-after { box-shadow: 0 2px 0 var(--accent); }

#twitchPlayer { position:absolute; inset:0; width:100%; height:100%; }
#twitchPlayer iframe { width:100%; height:100%; border:0; }
.playerframe.is-twitch { min-height:300px; }
.twitch-thumb { display:grid; place-items:center; flex-shrink:0; width:88px; aspect-ratio:16/9; border-radius:8px; background:#291e3c; color:#d8baff; font-size:12px; }
@media(max-width:820px){.twitch-thumb{width:104px;}}

.external-player{position:absolute;inset:0;width:100%;height:100%;background:#000;}
.external-player iframe,.external-player video{display:block;width:100%;height:100%;border:0;object-fit:contain;}
.media-thumb{background:var(--surface);color:var(--muted);}