.c8l-player {
  --player-accent: var(--control-thumb, #c5a676);
  --player-hover: var(--control-hover, #e4c58e);
  --player-track: var(--control-track, #17120c);
  --player-edge: var(--control-edge, #6b5030);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--player-track);
  color: var(--player-accent);
  color-scheme: dark;
}
.c8l-player > video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: #080606;
}
.c8l-player-controls { padding: 8px 12px 0; background: var(--player-track); }
.c8l-player-controls [hidden] { display: none !important; }
.c8l-player-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.c8l-player .c8l-player-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--player-edge);
  border-radius: 8px;
  background: var(--player-track);
  color: var(--player-accent);
  font: 600 12px/1.4 ui-sans-serif, system-ui, sans-serif;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}
.c8l-player .c8l-player-button:hover,
.c8l-player .c8l-player-button[aria-pressed="true"] { color: var(--player-hover); border-color: var(--player-accent); }
.c8l-player .c8l-player-button:disabled { opacity: .6; cursor: not-allowed; }
.c8l-player :is(button, input, a):focus-visible { outline: 3px solid var(--player-hover); outline-offset: 3px; }
.c8l-player-time { flex: 1 0 auto; color: var(--player-accent); font: 12px/1.4 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.c8l-player-seek { display: block; margin: 0; }
.c8l-player .c8l-player-range {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--player-accent);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--player-accent);
  cursor: pointer;
}
.c8l-player-range::-webkit-slider-runnable-track { height: 12px; border: 1px solid var(--player-edge); border-radius: 12px; background: var(--player-track); }
.c8l-player-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin-top: -7px; border: 2px solid var(--player-edge); border-radius: 50%; background: var(--player-accent); box-shadow: 0 2px 6px #0006; }
.c8l-player-range::-moz-range-track { height: 10px; border: 1px solid var(--player-edge); border-radius: 12px; background: var(--player-track); }
.c8l-player-range::-moz-range-progress { height: 10px; border-radius: 12px; background: var(--player-accent); }
.c8l-player-range::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid var(--player-edge); border-radius: 50%; background: var(--player-accent); box-shadow: 0 2px 6px #0006; }
.c8l-player-range:hover::-webkit-slider-thumb { background: var(--player-hover); }
.c8l-player-range:hover::-moz-range-thumb { background: var(--player-hover); }
.c8l-player-volume { padding: 8px 0; max-width: 280px; }
.c8l-player-volume-label { display: block; font: 12px/1.4 ui-sans-serif, system-ui, sans-serif; }
.c8l-player-status { margin: 0; min-height: 0; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; color: var(--player-hover); }
.c8l-player-status:not(:empty) { padding: 8px 0; }
.c8l-player-download,
.c8l-player-fallback { margin: 0; padding: 6px 12px 10px; color: var(--player-accent); font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
.c8l-player-download a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.c8l-player-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.c8l-player:fullscreen { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; max-width: none; border-radius: 0; padding: 12px; box-sizing: border-box; }
.c8l-player:fullscreen > video { flex: 1 1 auto; min-height: 0; height: 0; object-fit: contain; }
.c8l-player:fullscreen .c8l-player-controls,
.c8l-player:fullscreen .c8l-player-download { flex: 0 0 auto; }
.c8l-player::backdrop { background: #080606; }
@media (max-width: 500px) {
  .c8l-player-controls { padding: 6px 8px 0; }
  .c8l-player-row { gap: 6px; }
  .c8l-player-time { flex-basis: calc(100% - 110px); }
  .c8l-player .c8l-player-button { flex: 1 1 auto; }
  .c8l-player-volume { max-width: none; }
}

.c8l-player, .c8l-player * { box-sizing: border-box; }
@media(max-width:500px){
  .c8l-player-controls{padding:10px 10px 0}
  .c8l-player-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .c8l-player .c8l-player-button{width:100%;min-width:0;min-height:46px;font-size:13px;line-height:1.45;padding:10px 8px;white-space:normal;overflow-wrap:anywhere}
  .c8l-player-button:last-child{grid-column:1/-1}
  .c8l-player-time{min-width:0;font-size:12px;line-height:1.6;text-align:center;overflow-wrap:anywhere}
  .c8l-player-volume-label,.c8l-player-status,.c8l-player-download,.c8l-player-fallback{font-size:13px;line-height:1.7}
  .c8l-player-download a{display:inline-flex;align-items:center;min-height:44px}
}